@innovastudio/contentbuilder 1.4.138 → 1.4.140

package/public/contentbuilder/contentbuilder.esm.js

@@ -702,11 +702,14 @@ class Util {
     const cell = this.cellSelected();
     let row;
     if (!cell) {
-      // If no active cell, check if it is from .row-add-initial (empty info)
-      row = this.builder.doc.querySelector('.row-active');
-      if (!row) return;else {
-        // Empty content will always use 'row' mode to insert block.
-        mode = 'row';
+      let elm = this.builder.activeElement;
+      if (elm && elm.closest('.is-block')) ; else {
+        // If no active cell, check if it is from .row-add-initial (empty info)
+        row = this.builder.doc.querySelector('.row-active');
+        if (!row) return;else {
+          // Empty content will always use 'row' mode to insert block.
+          mode = 'row';
+        }
       }
     } else {
       row = cell.parentNode;
@@ -1853,9 +1856,9 @@ class Util {
   getUIStyles() {
     const dom = this.dom;
     const html = `
-        <input type="text" class="style-helper-input" style="display:none;">
+        <input type="text" class="style-helper-input" id="__style_helper_input" style="display:none;">
         <button class="style-helper-button-classic classic" style="display:none;"><svg><use xlink:href="#ion-code-working"></use></svg></button>
-        <select class="style-helper-select" style="display:none;"><option value=""></option></select>
+        <select class="style-helper-select" id="__style_helper_select" style="display:none;"><option value=""></option></select>
 
         <div class="style-helper modal-color"></div>
         <div class="style-helper modal-background"></div>
@@ -2172,12 +2175,12 @@ class Util {
         <li role="option" tabindex="0" data-provider="" data-font-family="" style="font-size:12px;padding:10px 7px;box-sizing:border-box;"><div></div>
             <span style="z-index:1;position: relative;pointer-events: none;">${this.out('None')}</span>
         </li>
-        <li role="option" tabindex="0" data-provider="" data-font-family="Arial, sans-serif"><div></div><img src="${path}arial.png"></li>
-        <li role="option" tabindex="0" data-provider="" data-font-family="courier"><div></div><img src="${path}courier.png"></li>
-        <li role="option" tabindex="0" data-provider="" data-font-family="Georgia, serif"><div></div><img src="${path}georgia.png"></li>
-        <li role="option" tabindex="0" data-provider="" data-font-family="monospace"><div></div><img src="${path}monospace.png"></li>
-        <li role="option" tabindex="0" data-provider="" data-font-family="sans-serif"><div></div><img src="${path}sans_serif.png"></li>
-        <li role="option" tabindex="0" data-provider="" data-font-family="serif"><div></div><img src="${path}serif.png"></li>
+        <li role="option" tabindex="0" data-provider="" data-font-family="'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif"><div></div><img src="${path}arial.png"></li>
+        <li role="option" tabindex="0" data-provider="" data-font-family="'Nimbus Mono PS', 'Courier New', monospace"><div></div><img src="${path}courier.png"></li>
+        <li role="option" tabindex="0" data-provider="" data-font-family="Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif"><div></div><img src="${path}georgia.png"></li>
+        <li role="option" tabindex="0" data-provider="" data-font-family="ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace"><div></div><img src="${path}monospace.png"></li>
+        <li role="option" tabindex="0" data-provider="" data-font-family="system-ui, sans-serif"><div></div><img src="${path}sans_serif.png"></li>
+        <li role="option" tabindex="0" data-provider="" data-font-family="Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"><div></div><img src="${path}serif.png"></li>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Abel, sans-serif"><div></div><img src="${path}abel.png"></li>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Abril Fatface"><div></div><img src="${path}abril_fatface.png"></li>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Advent Pro, sans-serif" data-font-style="wght@100;200;300;400;500;600;700"><div></div><img src="${path}advent_pro.png"></li>
@@ -10210,7 +10213,7 @@ class HtmlUtil {
       */
       const html = `<div class="is-modal viewhtml" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div class="is-modal-content">
-                    <textarea class="tabSupport" style="width:100%;height:calc(100% - 50px);border:none;margin:0;box-sizing:border-box;"></textarea>
+                    <textarea class="tabSupport" id="__tabsupport" style="width:100%;height:calc(100% - 50px);border:none;margin:0;box-sizing:border-box;"></textarea>
                     <div class="is-modal-footer" style="border-top:1px solid ${this.builder.styleSeparatorColor};width:100%;height:50px;position:absolute;left:0;bottom:0;overflow:hidden;text-align:right">
                         <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
                         <button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
@@ -10220,7 +10223,7 @@ class HtmlUtil {
 
             <div class="is-modal viewhtmlmonaco" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div class="is-modal-content" style="width:${this.builder.blockCodeEditorWidth};max-width:${this.builder.blockCodeEditorMaxWidth};padding:0">
-                    <textarea style="position:absolute;display:none;"></textarea>
+                    <textarea id="__viewhtmlmonaco" style="position:absolute;display:none;"></textarea>
                     <div class="input-code-editor" style="width:100%;height:${this.builder.blockCodeEditorHeight};"></div>
                     <div class="is-modal-footer" style="display:flex;justify-content:flex-end;border-top:1px solid ${this.builder.styleSeparatorColor};">
                         <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
@@ -10231,7 +10234,7 @@ class HtmlUtil {
 
             <div class="is-modal viewhtmlexternal" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div class="is-modal-content" style="width:${this.builder.codeEditorWidth};max-width:${this.builder.codeEditorMaxWidth};padding:0">
-                    <div class="input-code-editor" style="width:100%;height:${this.builder.codeEditorHeight};"></div>
+                    <div class="input-code-editor" id="__input_code_editor" style="width:100%;height:${this.builder.codeEditorHeight};"></div>
                     <div class="is-modal-footer" style="display:flex;justify-content:flex-end;border-top:1px solid ${this.builder.styleSeparatorColor};">
                         <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
                         <button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
@@ -11063,6 +11066,23 @@ class HtmlUtil {
       dom$k.removeElements(elms);
       elms = tmp.querySelectorAll('.is-section-info');
       dom$k.removeElements(elms);
+
+      // 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'));
+
       var html_content = '';
       var html_footer = '';
       var html_others = '';
@@ -11289,6 +11309,22 @@ class UndoRedo {
     dom.removeElements(tmp.querySelectorAll('.ovl'));
     dom.removeElements(tmp.querySelectorAll('.row-add-initial'));
 
+    // freeform
+    elms = tmp.querySelectorAll('.is-block .handle, .is-block .rotate-handle');
+    dom.removeElements(elms);
+    elms = tmp.querySelectorAll('.is-block');
+    Array.prototype.forEach.call(elms, elm => {
+      dom.removeClass(elm, 'active');
+      dom.removeClass(elm, 'multi');
+      dom.removeClass(elm, 'editable');
+      dom.removeClass(elm, 'fluid');
+      dom.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'));
+
     //ContentBox
     elms = tmp.querySelectorAll('.is-section-tool');
     dom.removeElements(elms);
@@ -11885,6 +11921,20 @@ const prepareSvgIcons = builder => {
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 15h2" /><path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" /><path d="M11 12h6" /><path d="M13 9h4" />
             </symbol>
 
+
+            <symbol id="icon-stack-forward" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l-8 4l8 4l8 -4l-8 -4" fill="currentColor" /><path d="M10 12l-6 3l8 4l8 -4l-6 -3" />
+            </symbol>
+            <symbol id="icon-stack-backward" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 12l6 -3l-8 -4l-8 4l6 3" /><path d="M10 12l-6 3l8 4l8 -4l-6 -3l-2 1z" fill="currentColor" />
+            </symbol>
+            <symbol id="icon-arrow-down" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 5l0 14" /><path d="M18 13l-6 6" /><path d="M6 13l6 6" />
+            </symbol>
+            <symbol id="icon-arrow-up" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 5l0 14" /><path d="M18 11l-6 -6" /><path d="M6 11l6 -6" />
+            </symbol>
+
             </defs>
         </svg>`;
   builder.dom.appendHtml(builder.builderStuff, html);
@@ -13398,9 +13448,10 @@ const renderQuickAdd = builder => {
       const ifr = modal.querySelector('iframe');
       var doc = ifr.contentWindow.document;
       if (doc.body.innerHTML === '') {
-        doc.open();
-        doc.write(snippets.getSnippetsHtml());
-        doc.close();
+        // doc.open();
+        // doc.write(snippets.getSnippetsHtml());
+        // doc.close();
+        ifr.srcdoc = snippets.getSnippetsHtml();
       }
 
       // quickadd.style.display = '';
@@ -18141,6 +18192,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
   // let safariAgent = false;
 
   let activeBuilderArea;
+  let itemHeight;
   new Sortable(snippetlist, {
     // forceFallback: safariAgent,
     group: {
@@ -18151,7 +18203,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
 
     sort: false,
     animation: 150,
-    onChoose: () => {
+    onChoose: evt => {
       // Adjust temmporary
       const newCss = `
             <style id="css-scale">
@@ -18163,6 +18215,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
                 }
             </style>
             `;
+      itemHeight = evt.item.offsetHeight;
       if (builder.iframe) {
         const oldCss = builder.contentStuff.querySelector('#css-scale');
         if (oldCss) oldCss.parentNode.removeChild(oldCss);
@@ -18174,6 +18227,16 @@ const renderSnippetPanel = (builder, snippetOpen) => {
       }
       builder.sectionDropSetup();
     },
+    onClone: evt => {
+      // fix broken image on cloned element
+      var cloneEl = evt.clone;
+      let img = cloneEl.querySelector('img');
+      img.style.opacity = 0.0001;
+      cloneEl.style.height = itemHeight + 'px';
+      let timestamp = new Date().getTime();
+      img.src = img.src + '?' + timestamp;
+      img.style.opacity = '';
+    },
     onMove: () => {
       let emptyinfo = builder.doc.querySelector('.row-add-initial'); // if there is empty info, remove it during snippet drag drop
       // if(emptyinfo) emptyinfo.parentNode.removeChild(emptyinfo);
@@ -18211,6 +18274,13 @@ const renderSnippetPanel = (builder, snippetOpen) => {
       if (activeBuilderArea) {
         dom.addClass(activeBuilderArea, 'builder-active');
       }
+
+      // destroy
+      if (builder.sortableOnCanvas) builder.sortableOnCanvas.forEach(obj => {
+        if (obj) {
+          obj.destroy();
+        }
+      });
       if (builder.sortableOnPage) builder.sortableOnPage.destroy();
     }
   });
@@ -45567,10 +45637,10 @@ class Image$1 {
                         </div>
 
                         <label style="display:block;margin-top:14px;">
-                            <input class="input-newwindow" type="checkbox" />  ${util.out('Open new window')}&nbsp;
+                            <input class="input-newwindow" id="__input_newwindow2" type="checkbox" />  ${util.out('Open new window')}&nbsp;
                         </label>
                         <label id="lblImageLinkOpenLightbox" style="${this.builder.useLightbox ? 'display:block' : 'display:none'};margin-top:5px;margin-bottom:14px;">
-                            <input class="input-openlightbox" type="checkbox" />  ${util.out('Open in a lightbox (for image, video or Youtube)')}&nbsp;
+                            <input class="input-openlightbox" id="__input_openlightbox2" type="checkbox" />  ${util.out('Open in a lightbox (for image, video or Youtube)')}&nbsp;
                         </label>
                         
                         <div style="text-align:right;margin-top:14px;">
@@ -48803,10 +48873,10 @@ class Hyperlink {
                         </div>
                     </div>
                     <label style="display:block;margin-top:14px;">
-                        <input class="input-newwindow" type="checkbox" />  ${util.out('Open new window')}&nbsp;
+                        <input class="input-newwindow" id="__input_newwindow" type="checkbox" />  ${util.out('Open new window')}&nbsp;
                     </label>
                     <label id="lblOpenLightbox" style="${this.builder.useLightbox ? 'display:block' : 'display:none'};margin-top:5px;margin-bottom:14px;">
-                        <input class="input-openlightbox" type="checkbox" />  ${util.out('Open in a lightbox (for image, video or Youtube)')}&nbsp;
+                        <input class="input-openlightbox" id="__input_openlightbox" type="checkbox" />  ${util.out('Open in a lightbox (for image, video or Youtube)')}&nbsp;
                     </label>
 
                     <label id="lblCreateLinkText" for="inpCreateLinkText" style="margin-top:14px;display:block">${util.out('Text')}:</label>
@@ -50091,6 +50161,8 @@ class Module {
     });
     */
     if (module.getAttribute('data-panel') === 'side' && this.builder.controlPanel) ; else {
+      let iframe = moduleModal.querySelector('iframe');
+      iframe.style.opacity = 0.001;
       this.util.showModal(moduleModal, true, () => {
         if (btn) {
           btn.removeAttribute('data-focus');
@@ -50102,14 +50174,19 @@ class Module {
       // var d = new Date();
       // moduleModal.querySelector('iframe').src = this.builder.opts.modulePath + modulename + '.html?' + d.getTime(); //always refreshed
 
-      let iframe = moduleModal.querySelector('iframe');
       let result = await fetch(this.builder.opts.modulePath + modulename + '.html');
       result = await result.text();
       result = result.replace(/<script>/g, `${this.builder.nonce ? `<script nonce="${this.builder.nonce}">` : '<script>'}`);
-      let doc = iframe.contentWindow.document;
-      doc.open();
-      doc.write(result);
-      doc.close();
+
+      // let doc = iframe.contentWindow.document;
+      // doc.open();
+      // doc.write(result);
+      // doc.close();
+
+      iframe.srcdoc = result;
+      setTimeout(() => {
+        iframe.style.opacity = '';
+      }, 1);
     }
   }
   click(col) {
@@ -50337,8 +50414,8 @@ class Iframe {
             
             <div class="is-modal iframelink" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div class="is-modal-content">
-                    <input class="input-src" type="text" placeholder="Source" style="width:100%;margin-bottom:12px;"/>
-                    <textarea class="input-embedcode" type="text" placeholder="Embed Code" style="width:100%;height:300px;margin-bottom:12px;display:none;"></textarea>
+                    <input class="input-src" id="__iframelink_input_src" type="text" placeholder="Source" style="width:100%;margin-bottom:12px;"/>
+                    <textarea class="input-embedcode" id="__iframelink_input_embedcode" type="text" placeholder="Embed Code" style="width:100%;height:300px;margin-bottom:12px;display:none;"></textarea>
                     <div style="text-align:right">
                         <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
                         <button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
@@ -51047,13 +51124,13 @@ class Video {
                     </div>
                     
                     <label style="display:block;margin-top:14px;">
-                        <input class="input-video-controls" type="checkbox" />  ${util.out('Show Controls')}&nbsp;
+                        <input class="input-video-controls" id="__input_video_controls" type="checkbox" />  ${util.out('Show Controls')}&nbsp;
                     </label>
                     <label style="display:block;margin-top:5px;">
-                        <input class="input-video-loop" type="checkbox" />  ${util.out('Loop')}&nbsp;
+                        <input class="input-video-loop" id="__input_video_loop" type="checkbox" />  ${util.out('Loop')}&nbsp;
                     </label>
                     <label style="display:block;margin-top:5px;">
-                        <input class="input-video-autoplay" type="checkbox" />  ${util.out('Autoplay')}&nbsp;
+                        <input class="input-video-autoplay" id="__input_video_autoplay" type="checkbox" />  ${util.out('Autoplay')}&nbsp;
                     </label>
                     
                     <div style="text-align:right;margin-top:14px;">
@@ -51887,7 +51964,7 @@ class ColorPicker {
                     </div>
                     <button class="is-color-preview" tabindex="0" style="outline:none;cursor:default;position:absolute;top:0;left:0;width:100%;height:100%;transition:none;"></button>
                 </div>
-                <input class="input-text" type="text" style="width:209px;height:35px;margin-top:8px;font-size:13px;"/>
+                <input class="input-text" id="{id}" type="text" style="width:209px;height:35px;margin-top:8px;font-size:13px;"/>
                 <button title="${this.out('Apply')}" class="input-ok" style="height:35px;margin-top:8px;"><svg class="is-icon-flex"><use xlink:href="#icon-ok"></use></svg></use></svg></svg></button>
             </div>
         </div>`;
@@ -51918,7 +51995,7 @@ class ColorPicker {
                             </div>
                             <button class="is-color-preview" tabindex="0" style="outline:none;cursor:default;position:absolute;top:0;left:0;width:100%;height:100%;transition:none;"></button>
                         </div>
-                        <input class="input-text" type="text" style="width:209px;height:35px;margin-top:8px;font-size:13px;"/>
+                        <input class="input-text" id="{id}" type="text" style="width:209px;height:35px;margin-top:8px;font-size:13px;"/>
                         <button title="${this.out('Apply')}" class="input-ok" style="height:35px;margin-top:8px;"><svg class="is-icon-flex"><use xlink:href="#icon-ok"></use></svg></use></svg></svg></button>
                     </div>
                     
@@ -51942,9 +52019,9 @@ class ColorPicker {
     let pickcolor;
     if (this.opts.renderOn !== '') {
       pickcolor = document.querySelector(this.opts.renderOn);
-      pickcolor.insertAdjacentHTML('beforeend', html);
+      pickcolor.insertAdjacentHTML('beforeend', html.replace(/{id}/g, this.makeId()));
     } else {
-      objStuff.insertAdjacentHTML('beforeend', html_modal);
+      objStuff.insertAdjacentHTML('beforeend', html_modal.replace(/{id}/g, this.makeId()));
       pickcolor = objStuff.querySelector('.is-modal.pickcolor');
     }
     objStuff.insertAdjacentHTML('beforeend', html_more);
@@ -52223,6 +52300,15 @@ class ColorPicker {
     });
   } //constructor
 
+  makeId() {
+    let text = '';
+    let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+    for (let i = 0; i < 2; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));
+    let text2 = '';
+    let possible2 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    for (let i = 0; i < 5; i++) text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));
+    return text + text2;
+  }
   out(s) {
     if (this.opts.lang) {
       let val = this.opts.lang[s];
@@ -52794,7 +52880,7 @@ class GradientPicker {
                             <div>
                                 <button title="${this.out('Select Color')}" class="input-gradient-color1 is-btn-color" data-value="dark" style="border-right:none"></button>
                                 <button title="${this.out('Select Color')}" class="input-gradient-color2 is-btn-color" data-value="dark"></button>
-                                <input type="text" class="input-gradient-deg" value="0" style="width:60px;height:35px;margin-left:7px;margin-right:5px;font-size:14px;"/> deg
+                                <input type="text" class="input-gradient-deg" id="{id}" value="0" style="width:60px;height:35px;margin-left:7px;margin-right:5px;font-size:14px;"/> deg
                             </div>
                         </div>
                         <div class="is-settings" style="margin-bottom:0">
@@ -52804,7 +52890,7 @@ class GradientPicker {
                 </div>
             </div>
         `;
-    objStuff.insertAdjacentHTML('beforeend', html);
+    objStuff.insertAdjacentHTML('beforeend', html.replace(/{id}/g, this.makeId()));
     const pickGradient = objStuff.querySelector('.is-modal.pickgradientcolor');
     this.pickGradient = pickGradient;
     const setupTabKeys = div => {
@@ -53032,6 +53118,15 @@ class GradientPicker {
     });
   } //constructor
 
+  makeId() {
+    let text = '';
+    let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+    for (let i = 0; i < 2; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));
+    let text2 = '';
+    let possible2 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    for (let i = 0; i < 5; i++) text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));
+    return text + text2;
+  }
   out(s) {
     if (this.opts.lang) {
       let val = this.opts.lang[s];
@@ -53463,9 +53558,7 @@ class RowTool {
                             <div class="div-colsperline" style="flex-direction:column">
                                 <label style="margin:20px 0 0;display:flex;flex-direction:column">
                                     <span style="margin:0 4px 3px 0">${util.out('Columns per Line')}:</span>
-                       
-                                    
-                                    <select class="input-numofcols" style="width:50%;display:none">
+                                    <select class="input-numofcols" id="__input_numofcols" style="width:50%;display:none">
                                         <option value="">Default</option>
                                         <option value="2">2 columns per row</option>
                                         <option value="3">3 columns per row</option>
@@ -60121,14 +60214,21 @@ class ElementTextStyles {
     });
     if (!this.builder.renderIframeLater) {
       let iframe = fontModal.querySelector('iframe');
-      let doc = iframe.contentWindow.document;
-      doc.open();
+
+      // let doc = iframe.contentWindow.document;
+      // doc.open();
+      // if(!this.builder.opts.emailMode) {
+      //     doc.write(this.util.getFontFamilyHTML(true));
+      // } else {
+      //     doc.write(this.util.getFontFamilyEmail(true));
+      // }
+      // doc.close();
+
       if (!this.builder.opts.emailMode) {
-        doc.write(this.util.getFontFamilyHTML(true));
+        iframe.srcdoc = this.util.getFontFamilyHTML(true);
       } else {
-        doc.write(this.util.getFontFamilyEmail(true));
+        iframe.srcdoc = this.util.getFontFamilyEmail(true);
       }
-      doc.close();
     }
     let btn = panelStuff.querySelector('.input-elm-fontfamily');
     btn.addEventListener('click', () => {
@@ -63066,7 +63166,7 @@ class Preferences {
     this.dom = dom;
     let htmlThemes = '';
     if (this.builder.themes) {
-      htmlThemes = '<div class="div-themes">';
+      htmlThemes = '<div class="div-themes" style="margin-top:3px">';
       let n = 0;
       this.builder.themes.forEach(item => {
         if (item[1] === '') {
@@ -63090,7 +63190,7 @@ class Preferences {
                         <div style="width:50%">
                             <label id="divBuilderMode" style="display:block;margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Builder Mode')}:&nbsp;
-                                <select class="select-buildermode">
+                                <select class="select-buildermode" id="__select_builderode">
                                     <option value="">${util.out('Default')}</option>
                                     <option value="minimal">${util.out('Minimal')}</option>
                                     <option value="clean">${util.out('Clean')}</option>
@@ -63099,7 +63199,7 @@ class Preferences {
                             
                             <label id="divOutlineMode" style="display:block;margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Outline Mode')}:&nbsp;
-                                <select class="select-outlinemode">
+                                <select class="select-outlinemode" id="__select_outlinemode">
                                     <option value="">${util.out('Row & column')}</option>
                                     <option value="row">${util.out('Row only')}</option>
                                 </select>
@@ -63107,35 +63207,35 @@ class Preferences {
 
                             <label style="display:block;margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Outline Style')}:&nbsp;
-                                <select class="select-outlinestyle">
+                                <select class="select-outlinestyle" id="__select_outlinestyle">>
                                     <option value="">${util.out('Colored')}</option>
                                     <option value="grayoutline">${util.out('Gray')}</option>
                                 </select>
                             </label>
                             
                             <label style="display:block;margin-top:10px;margin-bottom:10px;">
-                                <input class="input-hiderowcoloutline" type="checkbox" /> ${util.out('Hide Outline')}&nbsp;
+                                <input class="input-hiderowcoloutline" id="__input_hiderowcoloutline" type="checkbox" /> ${util.out('Hide Outline')}&nbsp;
                             </label>  
 
                             <label id="divHideCellTool" style="display:block;margin-top:10px;margin-bottom:10px;">
-                                <input class="input-hidecelltool" type="checkbox" />  ${util.out('Hide Column Tool')}&nbsp;
+                                <input class="input-hidecelltool" id="__input_hidecelltool" type="checkbox" />  ${util.out('Hide Column Tool')}&nbsp;
                             </label>
 
 
                             <label style="display:block;margin-top:10px;margin-bottom:10px;">
-                                <input class="input-hidesnippetaddtool" type="checkbox" />  ${util.out('Hide Snippet (+) Tool')}&nbsp;
+                                <input class="input-hidesnippetaddtool" id="__input_hidesnippetaddtool" type="checkbox" />  ${util.out('Hide Snippet (+) Tool')}&nbsp;
                             </label>
 
                             <label style="display:block;margin-top:10px;margin-bottom:10px;">
-                                <input class="input-hideelementtool" type="checkbox" /> ${util.out('Hide element tool')}&nbsp;
+                                <input class="input-hideelementtool" id="__input_hideelementtool" type="checkbox" /> ${util.out('Hide element tool')}&nbsp;
                             </label>  
 
                             <label style="display:block;margin-top:10px;margin-bottom:10px;">
-                                <input class="input-hideelementhighlight" type="checkbox" /> ${util.out('Hide element highlight')}&nbsp;
+                                <input class="input-hideelementhighlight" id="__input_hideelementhighlight" type="checkbox" /> ${util.out('Hide element highlight')}&nbsp;
                             </label>  
                             <label style="display:block;margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Row Tool Position')}:&nbsp;
-                                <select class="select-rowtool">
+                                <select class="select-rowtool" id="__select_rowtool">
                                     <option value="right">${util.out('Right')}</option>
                                     <option value="left">${util.out('Left')}</option>
                                 </select>
@@ -63143,7 +63243,7 @@ class Preferences {
 
                             <label style="display:block;margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Tool Style')}:&nbsp;
-                                <select class="select-toolstyle">
+                                <select class="select-toolstyle" id="__select_toolstyle">
                                     <option value="">${util.out('Colored')}</option>
                                     <option value="gray">${util.out('Mono')}</option>
                                 </select>
@@ -63153,12 +63253,12 @@ class Preferences {
                         <div style="width:50%">
 
                             <label class="option-opensnippets" style="display:block;margin-top:10px;margin-bottom:10px;">
-                                <input class="input-opensnippets" type="checkbox" />  ${util.out('Open snippets sidebar on start')}&nbsp;
+                                <input class="input-opensnippets" id="__input_opensnippets" type="checkbox" />  ${util.out('Open snippets sidebar on start')}&nbsp;
                             </label>
 
                             <label style="display:${builder.opts.snippetList === '#divSnippetList' ? 'block' : 'none'};margin-top:10px;margin-bottom:5px;">
                                ${util.out('Snippets sidebar visibility')}:&nbsp;
-                                <select class="select-snippetssidebardisplay">
+                                <select class="select-snippetssidebardisplay" id="__select_snippetssidebardisplay">
                                     <option value="auto">${util.out('Auto')}</option>
                                     <option value="always">${util.out('Always Visible')}</option>
                                 </select>
@@ -63166,7 +63266,7 @@ class Preferences {
 
                             <label style="display:block;margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Toolbar visibility')}:&nbsp;
-                                <select class="select-editingtoolbardisplay">
+                                <select class="select-editingtoolbardisplay" id="__select_editingtoolbardisplay">
                                     <option value="auto">${util.out('Auto')}</option>
                                     <option value="always">${util.out('Always Visible')}</option>
                                 </select>
@@ -63174,7 +63274,7 @@ class Preferences {
 
                             <label style="${this.builder.isTouchSupport ? 'display:none;' : 'display:block;'}margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Toolbar position')}:&nbsp;
-                                <select class="select-editingtoolbar">
+                                <select class="select-editingtoolbar" id="__select_editingtoolbar">
                                     <option value="topfull">${util.out('Top (Full Width)')}</option>
                                     <option value="top">${util.out('Top')}</option>
                                     <option value="left">${util.out('Left')}</option>
@@ -63184,7 +63284,7 @@ class Preferences {
 
                             <label style="display:block;margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Paste result')}:&nbsp;
-                                <select class="select-pasteresult">
+                                <select class="select-pasteresult" id="__select_pasteresult">
                                     <option value="html-without-styles">${util.out('HTML (without styles)')}</option>
                                     <option value="html">${util.out('HTML (with styles)')}</option>
                                     <option value="text">${util.out('Text only')}</option>
@@ -63193,7 +63293,7 @@ class Preferences {
 
                             <label style="display:block;margin-top:10px;margin-bottom:5px;">
                                 ${util.out('HTML View')}:&nbsp;
-                                <select class="select-htmlview">
+                                <select class="select-htmlview" id="__select_htmlview">
                                     <option value="shorten">${util.out('Shorten HTML')}</option>
                                     <option value="actual">${util.out('Actual')}</option>
                                 </select>
@@ -63202,8 +63302,8 @@ class Preferences {
                             ${this.builder.themes ? `
                                 <label style="${this.builder.isTouchSupport ? 'display:none;' : 'display:block;'}margin-top:10px;margin-bottom:5px;">
                                     ${util.out('Theme')}:&nbsp;
+                                    ${htmlThemes}
                                 </label> 
-                                ${htmlThemes}
                             ` : ''}
 
                         </div>
@@ -64856,14 +64956,19 @@ class Rte {
     // See preferences.js 284, contentbuilder.js 1800
     if (!this.builder.renderIframeLater) {
       let iframe = rteFontFamilyOptions.querySelector('iframe');
-      let doc = iframe.contentWindow.document;
-      doc.open();
+      // let doc = iframe.contentWindow.document;
+      // doc.open();
+      // if(!this.builder.opts.emailMode) {
+      //     doc.write(util.getFontFamilyHTML());
+      // } else {
+      //     doc.write(util.getFontFamilyEmail());
+      // }
+      // doc.close();
       if (!this.builder.opts.emailMode) {
-        doc.write(util.getFontFamilyHTML());
+        iframe.srcdoc = util.getFontFamilyHTML();
       } else {
-        doc.write(util.getFontFamilyEmail());
+        iframe.srcdoc = util.getFontFamilyEmail();
       }
-      doc.close();
     }
     let btnRteFontFamily = builderStuff.querySelectorAll('button.rte-fontfamily');
     btnRteFontFamily.forEach(btn => {
@@ -69303,7 +69408,18 @@ class Rte {
     }
     const viewportWidth = document.body.clientWidth; //window.innerWidth;
     const viewportHeight = window.innerHeight;
-    if (this.builder.opts.toolbar === 'left' || this.builder.opts.toolbar === 'right') {
+    if (this.builder.opts.toolbar === 'right') {
+      let h = this.rteTool.offsetHeight;
+      let top = viewportHeight / 2 - h / 2;
+      this.rteTool.style.left = '';
+      this.rteTool.style.top = top + 'px';
+
+      // Element Toolbar
+      h = this.elementRteTool.offsetHeight;
+      top = viewportHeight / 2 - h / 2;
+      this.elementRteTool.style.left = '';
+      this.elementRteTool.style.top = top + 'px';
+    } else if (this.builder.opts.toolbar === 'left') {
       let h = this.rteTool.offsetHeight;
       let top = viewportHeight / 2 - h / 2;
       this.rteTool.style.left = leftSidebarAdj2 + 'px';
@@ -71487,12 +71603,12 @@ class ContentStuff {
             }
         }
 
-
+        /*
         @media (min-width: 640px) {
             .is-builder > div {
                 display:flex
             }
-        }
+        }*/
 
         /* sortable */
         .sortable-drag {
@@ -71525,6 +71641,16 @@ class ContentStuff {
             transform-origin: top left;
         }
 
+        /* Canvas Mode */
+        .box-canvas > .sortable-ghost {
+            background: transparent;
+            outline: rgba(140, 140, 140, 0.5) 4px dashed !important;
+            outline-offset: -15px;
+            height:100% !important;
+            transition: none !important;
+            z-index:1;
+        }
+
         /* Moveable (Image resizer) */
         .moveable-control {
             border: none !important; 
@@ -73069,10 +73195,14 @@ class LivePreview {
     let maxw = window.getComputedStyle(doc.querySelector('.is-builder')).getPropertyValue('max-width');
     if (!isNaN(parseInt(maxw))) maxwidth = maxw;
     let content = this.builder.html();
-    doc = iframe.contentWindow.document;
-    doc.open();
-    doc.write('<html>' + '<head>' + basehref + '<meta charset="utf-8">' + '<title></title>' + '<style>#_cbhtml > *:not(.is-lightbox) {display:none}</style>' + csslinks + (this.builder.useLightbox ? '<link href="' + this.builder.assetPath + 'scripts/lightbox/lightbox.css" rel="stylesheet">' : '') + '<style>' + '.slider-image { display:block !important; }' + '.container {margin:35px auto 0; max-width: ' + maxwidth + '; width:100%; padding:0 20px; box-sizing: border-box;}' + '</style>' + '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>' + jsincludes1 + '</head>' + '<body>' + '<div class="container preview">' + content + '</div>' + jsincludes2 + (this.builder.useLightbox ? '<script src="' + this.builder.assetPath + 'scripts/lightbox/lightbox.js"></script><script>window.lightbox.init();</script>' : '') + '</body>' + '</html>');
-    doc.close();
+    let html = '<html>' + '<head>' + basehref + '<meta charset="utf-8">' + '<title></title>' + '<style>#_cbhtml > *:not(.is-lightbox) {display:none}</style>' + csslinks + (this.builder.useLightbox ? '<link href="' + this.builder.assetPath + 'scripts/lightbox/lightbox.css" rel="stylesheet">' : '') + '<style>' + '.slider-image { display:block !important; }' + '.container {margin:35px auto 0; max-width: ' + maxwidth + '; width:100%; padding:0 20px; box-sizing: border-box;}' + '</style>' + '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>' + jsincludes1 + '</head>' + '<body>' + '<div class="container preview">' + content + '</div>' + jsincludes2 + (this.builder.useLightbox ? '<script src="' + this.builder.assetPath + 'scripts/lightbox/lightbox.js"></script><script>window.lightbox.init();</script>' : '') + '</body>' + '</html>';
+
+    // doc = iframe.contentWindow.document;
+    // doc.open();
+    // doc.write(html);
+    // doc.close();
+
+    iframe.srcdoc = html;
   }
 }
 
@@ -74234,7 +74364,7 @@ class Dictation {
                         <button class="scope-image" title="${util.out('Image')}" data-value="image" style="display:none;margin-right:5px">${util.out('Image')}</button> 
                     </div>
                 </div>
-                <textarea class="inp-command"></textarea>
+                <textarea class="inp-command" id="__inp_command"></textarea>
                 <div style="display:flex;">
                     <button title="${util.out('Settings')}" class="cmd-command-config classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
                         <svg class="is-icon-flex" style="width:15px;height:15px;flex:none;"><use xlink:href="#icon-settings"></use></svg>
@@ -74297,7 +74427,7 @@ class Dictation {
 
                 <label class="label-input-autosend-command" style="margin:18px 0 0 0;display:flex;align-items:center;letter-spacing:0">
                     <span>${util.out('Auto send command delay')}</soan>:
-                    <input class="input-autosend-delay" style="width:60px;text-align:center;padding-left:0;height:33px;margin-right:3px;" type="text" value="4000"> <span>ms</span>
+                    <input class="input-autosend-delay" id="__input_autosend_delay" style="width:60px;text-align:center;padding-left:0;height:33px;margin-right:3px;" type="text" value="4000"> <span>ms</span>
                 </label>
 
                 <div class="command-settings-info" style="display:none"></div>
@@ -74305,7 +74435,7 @@ class Dictation {
                 <label class="label-input-command-lang" style="display:none;flex-direction:column;letter-spacing:0;margin:18px 0 0 0;">
                     <span>${util.out('Language')}:</span>
                     <div style="display:flex; align-items: baseline;flex-direction: row;">
-                        <input class="input-command-lang" style="width:70px;text-align:center;padding-left:0;height:33px;margin-top:5px;margin-right:10px" type="text" value="en-us">
+                        <input class="input-command-lang" id="__input_command_lang" style="width:70px;text-align:center;padding-left:0;height:33px;margin-top:5px;margin-right:10px" type="text" value="en-us">
                         <span>(${util.out('BCP-47 format')})</span>
                     </div>
                 </label>
@@ -76459,7 +76589,7 @@ class ContentBuilder {
       let rowClicked;
       if (target.parentNode && target.parentNode.classList) rowClicked = target.parentNode.classList.contains('is-builder');
       let containerClicked = target.classList.contains('is-builder');
-      let a = target.closest('.is-builder');
+      let a = target.closest('.is-builder') || target.closest('.is-block'); // freeform
       let p = target.closest('.is-subblock');
       let b = target.closest('.is-modal') || target.closest('.keep-selection');
       let c = target.closest('.is-side') || target.closest('.is-sidebar');
@@ -77058,7 +77188,8 @@ class ContentBuilder {
             if (oldCss) oldCss.parentNode.removeChild(oldCss);
             this.builderStuff.insertAdjacentHTML('afterbegin', newCss);
           }
-          this.sectionDropSetup(); // enable drop as section (ContentBox)
+
+          // this.sectionDropSetup(); // enable drop as section (ContentBox)
         },
 
         onStart: () => {
@@ -77069,7 +77200,7 @@ class ContentBuilder {
         onEnd: () => {
           this.util.checkEmpty(); // for multiple instances check
 
-          if (this.sortableOnPage) this.sortableOnPage.destroy(); // enable drop as section (ContentBox)
+          // if(this.sortableOnPage) this.sortableOnPage.destroy(); // enable drop as section (ContentBox)
 
           if (this.controlPanel) {
             // && document.body.classList.contains('controlpanel') (already opens)
@@ -77198,9 +77329,17 @@ class ContentBuilder {
 
             // Hide element tool
             this.elmTool.hide();
+            if (this.sortableOnCanvas) this.sortableOnCanvas.forEach(obj => {
+              if (obj) {
+                obj.destroy();
+              }
+            });
+
+            // if(this.sortableOnPage) this.sortableOnPage.destroy();
           }
         }
       });
+
       this.sortableObjects.push(sortableObject);
       builder.setAttribute('data-sort', true);
     }
@@ -78380,7 +78519,7 @@ class ContentBuilder {
     //backward
     this.loadHtml(html);
   }
-  setUIColor(mode, csslink) {
+  async setUIColor(mode, csslink) {
     // Get previous css
     let cssLink = document.querySelector('[data-cb-color]');
     if (cssLink) cssLink.setAttribute('data-cb-del', '');
@@ -78463,13 +78602,18 @@ class ContentBuilder {
 
       // if(this.opts.onThemeChange) this.opts.onThemeChange();
 
-      setTimeout(() => {
-        util.getUIStyles();
-        this.setUIColorRefresh();
-        if (this.opts.onThemeChange) this.opts.onThemeChange();
-      }, 1000);
+      await this.delay(1000);
+      // setTimeout(()=>{
+      util.getUIStyles();
+      this.setUIColorRefresh();
+      if (this.opts.onThemeChange) this.opts.onThemeChange();
+      // }, 1000);
     }
   }
+
+  async delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
   setUIColorRefresh() {
     // All related with iframe style
 
@@ -78491,13 +78635,18 @@ class ContentBuilder {
       let iframeIcons = this.rte.rteIconOptions.querySelector('iframe');
       let doc3 = iframeIcons.contentWindow.document;
       if (doc1.body.innerHTML === '') {
-        doc1.open();
+        // doc1.open();
+        // if(!this.opts.emailMode) {
+        //     doc1.write(util.getFontFamilyHTML());
+        // } else {
+        //     doc1.write(util.getFontFamilyEmail());
+        // }
+        // doc1.close();
         if (!this.opts.emailMode) {
-          doc1.write(util.getFontFamilyHTML());
+          iframeRte.srcdoc = util.getFontFamilyHTML();
         } else {
-          doc1.write(util.getFontFamilyEmail());
+          iframeRte.srcdoc = util.getFontFamilyEmail();
         }
-        doc1.close();
       } else {
         this.util.refreshFontFamilyStyle1();
       }
@@ -78506,21 +78655,27 @@ class ContentBuilder {
         let iframePanel = fontModal.querySelector('iframe');
         let doc2 = iframePanel.contentWindow.document;
         if (doc2.body.innerHTML === '') {
-          doc2.open();
+          // doc2.open();
+          // if(!this.opts.emailMode) {
+          //     doc2.write(util.getFontFamilyHTML(true));
+          // } else {
+          //     doc2.write(util.getFontFamilyEmail(true));
+          // }
+          // doc2.close();
           if (!this.opts.emailMode) {
-            doc2.write(util.getFontFamilyHTML(true));
+            iframePanel.srcdoc = util.getFontFamilyHTML(true);
           } else {
-            doc2.write(util.getFontFamilyEmail(true));
+            iframePanel.srcdoc = util.getFontFamilyEmail(true);
           }
-          doc2.close();
         } else {
           this.util.refreshFontFamilyStyle2();
         }
       }
       if (doc3.body.innerHTML === '') {
-        doc3.open();
-        doc3.write(this.rte.getIconsHTML());
-        doc3.close();
+        // doc3.open();
+        // doc3.write(this.rte.getIconsHTML());
+        // doc3.close();
+        iframeIcons.srcdoc = this.rte.getIconsHTML();
       } else {
         this.rte.refreshIconsStyle();
       }
@@ -79825,6 +79980,164 @@ class ContentBuilder {
     if (this.page) {
       if (this.page !== '.is-wrapper') return; // only for ContentBox
       const wrapper = this.doc.querySelector(this.page);
+      this.sortableOnCanvas = [];
+      const sections = wrapper.querySelectorAll('.is-box.box-canvas');
+      sections.forEach(section => {
+        const obj = new Sortable(section, {
+          scroll: true,
+          group: 'shared',
+          direction: 'horizontal',
+          animation: 150,
+          sort: true,
+          onAdd: evt => {
+            let itemEl = evt.item;
+            if (itemEl.getAttribute('data-id')) {
+              // If has data-id attribute, the dropped item is from snippet panel (snippetpanel.js)
+
+              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
+              if (elements.length > 0) {
+                lastBlock = elements[elements.length - 1];
+              }
+
+              // snippetJSON is snippet's JSON (from assets/minimalist-blocks/content.js) that store all snippets' html
+              const result = this.opts.snippetJSON.snippets.filter(item => {
+                if (item.id + '' === snippetid) return item;else return false;
+              });
+              var html = result[0].html;
+              var noedit = result[0].noedit;
+              var bSnippet;
+              if (html.indexOf('"row') === -1) {
+                bSnippet = true; // Just snippet (without row/column grid)
+              } else {
+                bSnippet = false; // Snippet is wrapped in row/colum
+              }
+
+              if (this.opts.emailMode) bSnippet = false;
+
+              // Convert snippet into your defined 12 columns grid   
+              var rowClass = this.opts.row; //row
+              var colClass = this.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']
+              if (rowClass !== '' && colClass.length === 12) {
+                // html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
+                html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
+                html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);
+                html = html.replace(new RegExp('column full', 'g'), colClass[11]);
+                html = html.replace(new RegExp('column half', 'g'), colClass[5]);
+                html = html.replace(new RegExp('column third', 'g'), colClass[3]);
+                html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
+                html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
+                html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
+                html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
+                html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
+                html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
+                html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
+              }
+              html = html.replace(/{id}/g, this.util.makeId());
+              if (this.opts.onAdd) {
+                html = this.opts.onAdd(html);
+              }
+              if (this.opts.snippetPathReplace.length > 0) {
+                // try {
+                if (this.opts.snippetPathReplace[0] !== '') {
+                  var regex = new RegExp(this.opts.snippetPathReplace[0], 'g');
+                  html = html.replace(regex, this.opts.snippetPathReplace[1]);
+                  var string1 = this.opts.snippetPathReplace[0].replace(/\//g, '%2F');
+                  var string2 = this.opts.snippetPathReplace[1].replace(/\//g, '%2F');
+                  var regex2 = new RegExp(string1, 'g');
+                  html = html.replace(regex2, string2);
+                }
+                // } catch (e) { 1; }
+              }
+
+              if (bSnippet) {
+                // Just snippet (without row/column grid), ex. buttons, line, social, video, map.
+                // Can be inserted after current row, column (cell), element, or last row.
+
+                html = `<div class="${this.opts.row}"><div class="${this.opts.cols[this.opts.cols.length - 1]}"${noedit ? ' data-noedit' : ''}>${html}</div></div>`;
+
+                // Clean snippet from sortable related code
+                itemEl.removeAttribute('draggable');
+                this.dom.removeClass(itemEl, 'snippet-item');
+                const blockTemplate = `
+                                <div class="is-block block-steady height-auto" style="top: 20%; left: 20%; width: 800px;">
+                                    <div class="is-container container-new leading-12 size-17">
+                                    [%CONTENT%]
+                                    </div>
+                                </div>
+                                `;
+                itemEl.outerHTML = blockTemplate.replace('[%CONTENT%]', html);
+              } else {
+                // Snippet is wrapped in row/colum (may contain custom code or has [data-html] attribute)
+                // Can only be inserted after current row or last row (not on column or element).
+
+                let snippet = this.dom.createElement('div');
+                snippet.innerHTML = html;
+                let blocks = snippet.querySelectorAll('[data-html]');
+                Array.prototype.forEach.call(blocks, block => {
+                  // Render custom code block
+                  html = decodeURIComponent(block.getAttribute('data-html'));
+                  html = html.replace(/{id}/g, this.util.makeId());
+                  html = html.replace(/<script>/g, `${this.nonce ? `<script nonce="${this.nonce}">` : '<script>'}`);
+                  for (var i = 1; i <= 20; i++) {
+                    html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area
+                  }
+
+                  block.innerHTML = html;
+                });
+                html = snippet.innerHTML;
+
+                // Clean snippet from sortable related code
+                itemEl.removeAttribute('draggable');
+                this.dom.removeClass(itemEl, 'snippet-item');
+                itemEl.innerHTML = '';
+
+                // Use createContextualFragment() to make embedded script executable
+                // https://ghinda.net/article/script-tags/
+                var range = document.createRange();
+                range.setStart(itemEl, 0);
+                itemEl.appendChild(range.createContextualFragment(html));
+                const blockTemplate = `
+                                <div class="is-block block-steady height-auto" style="top: 20%; left: 20%; width: 800px;">
+                                    <div class="is-container container-new leading-12 size-17">
+                                    [%CONTENT%]
+                                    </div>
+                                </div>
+                                `;
+                itemEl.outerHTML = blockTemplate.replace('[%CONTENT%]', itemEl.innerHTML);
+              }
+              this.activeCol = null;
+              const builders = section.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);
+                }
+
+                // After snippet has been added, re-apply behavior on builder areas
+                this.applyBehaviorOn(builder);
+                builder.classList.remove('container-new');
+              });
+              if (this.opts.onBlockCanvasAdd) this.opts.onBlockCanvasAdd();
+              this.opts.onChange();
+              this.opts.onRender();
+            }
+
+            // destroy
+            if (this.sortableOnCanvas) this.sortableOnCanvas.forEach(obj => {
+              if (obj) {
+                obj.destroy();
+              }
+            });
+            if (this.sortableOnPage) this.sortableOnPage.destroy();
+          }
+        });
+        this.sortableOnCanvas.push(obj);
+      });
       this.sortableOnPage = new Sortable(wrapper, {
         scroll: true,
         group: 'shared',
@@ -80022,7 +80335,14 @@ class ContentBuilder {
           }
 
           // this.sortableOnPage.option('draggable', '.dummy');
-          this.sortableOnPage.destroy();
+
+          // destroy
+          if (this.sortableOnCanvas) this.sortableOnCanvas.forEach(obj => {
+            if (obj) {
+              obj.destroy();
+            }
+          });
+          if (this.sortableOnPage) this.sortableOnPage.destroy();
         }
       });
     }