@innovastudio/contentbox 1.5.95 → 1.5.97

package/public/contentbox/contentbox.esm.js

@@ -4313,21 +4313,17 @@ class EditSection {
     const modalDelConfirm = builderStuff.querySelector('.is-modal.delsectionconfirm');
     const btnOk = modalDelConfirm.querySelector('.input-ok');
     btnOk.addEventListener('click', () => {
-      const activeSection = this.builder.activeSection;
       this.builder.editor.saveForUndo();
-      activeSection.parentNode.removeChild(activeSection);
-      this.builder.sectionStack(); //Trigger Render event
-
-      this.builder.settings.onRender();
-      this.builder.editor.util.hideModal(modalDelConfirm);
-      this.builder.editor.util.clearControls(); //Trigger Change event
-
-      this.builder.settings.onChange(); // //Hide box tool
+      this.sectionDelete();
+      this.builder.sectionStack();
+      this.builder.hideModal(modalDelConfirm); // this.builder.editor.util.clearControls();
+      // //Hide box tool
       // let boxTool = document.querySelector('#divBoxTool');
       // boxTool.style.display = 'none';
       // setTimeout(()=>{
       //     boxTool.style.display = 'none';
       // }, 300);
+      //--- clear ---
 
       this.builder.activeSection = null;
       this.builder.activeBox = null;
@@ -4336,51 +4332,44 @@ class EditSection {
       this.builder.editor.activeCol = null;
       this.builder.wrapperEl.classList.remove('hard-select');
       this.builder.wrapperEl.classList.remove('is-container-edit');
-      this.builder.wrapperEl.classList.remove('is-clean-edit');
-      this.builder.refreshAnim();
+      this.builder.wrapperEl.classList.remove('is-clean-edit'); //--- /clear ---
+
+      this.builder.settings.onChange();
     });
     const btnSectionUp = modalEditSection.querySelector('.cmd-section-up');
     btnSectionUp.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
       this.sectionUp();
-      this.builder.sectionStack(); //Trigger Change event
-
+      this.builder.sectionStack();
       this.builder.settings.onChange();
     });
     const btnSectionDown = modalEditSection.querySelector('.cmd-section-down');
     btnSectionDown.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
       this.sectionDown();
-      this.builder.sectionStack(); //Trigger Change event
-
+      this.builder.sectionStack();
       this.builder.settings.onChange();
     });
     const btnSectionTop = modalEditSection.querySelector('.cmd-section-top');
     btnSectionTop.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
       this.sectionTop();
-      this.builder.sectionStack(); //Trigger Change event
-
+      this.builder.sectionStack();
       this.builder.settings.onChange();
     });
     const btnSectionBottom = modalEditSection.querySelector('.cmd-section-bottom');
     btnSectionBottom.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
       this.sectionBottom();
-      this.builder.sectionStack(); //Trigger Change event
-
+      this.builder.sectionStack();
       this.builder.settings.onChange();
     });
     const btnSectionDuplicate = modalEditSection.querySelector('.cmd-section-duplicate');
     btnSectionDuplicate.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
       this.sectionDuplicate();
-      this.builder.sectionStack(); //Trigger Change event
-
+      this.builder.sectionStack();
       this.builder.settings.onChange();
-      setTimeout(() => {
-        this.builder.refreshAnim();
-      }, 600);
     });
     const btnSectionAnimStart = modalEditSection.querySelectorAll('.cmd-section-anim-start');
     btnSectionAnimStart.forEach(btn => {
@@ -4398,8 +4387,7 @@ class EditSection {
           setTimeout(() => {
             dom$n.removeClass(btn, 'on');
           }, 100);
-        } //Trigger Change event
-
+        }
 
         this.builder.settings.onChange();
       });
@@ -4420,8 +4408,7 @@ class EditSection {
           setTimeout(() => {
             dom$n.removeClass(btn, 'on');
           }, 100);
-        } //Trigger Change event
-
+        }
 
         this.builder.settings.onChange();
       });
@@ -4444,8 +4431,7 @@ class EditSection {
         btns.forEach(btn => {
           dom$n.removeClass(btn, 'on');
         });
-        dom$n.addClass(btn, 'on'); //Trigger Change event
-
+        dom$n.addClass(btn, 'on');
         this.builder.settings.onChange();
         setTimeout(() => {
           this.builder.refreshAnim();
@@ -4468,8 +4454,7 @@ class EditSection {
           setTimeout(() => {
             dom$n.removeClass(btn, 'on');
           }, 100);
-        } //Trigger Change event
-
+        }
 
         this.builder.settings.onChange();
       });
@@ -4491,8 +4476,7 @@ class EditSection {
         btns.forEach(btn => {
           dom$n.removeClass(btn, 'on');
         });
-        dom$n.addClass(btn, 'on'); //Trigger Change event
-
+        dom$n.addClass(btn, 'on');
         this.builder.settings.onChange();
       });
     });
@@ -4518,8 +4502,7 @@ class EditSection {
         btns.forEach(btn => {
           dom$n.removeClass(btn, 'on');
         });
-        dom$n.addClass(btn, 'on'); //Trigger Change event
-
+        dom$n.addClass(btn, 'on');
         this.builder.settings.onChange();
       });
     });
@@ -4529,8 +4512,7 @@ class EditSection {
         this.builder.editor.saveForUndo();
         let val = btn.getAttribute('data-value'); // light or dark
 
-        this.sectionScrollIcon(val); //Trigger Change event
-
+        this.sectionScrollIcon(val);
         this.builder.settings.onChange();
       });
     });
@@ -4550,8 +4532,7 @@ class EditSection {
           setTimeout(() => {
             dom$n.removeClass(btn, 'on');
           }, 100);
-        } //Trigger Change event
-
+        }
 
         this.builder.settings.onChange();
       });
@@ -4559,8 +4540,7 @@ class EditSection {
     const chkScrollIcon = modalEditSection.querySelector('#chkScrollIcon');
     chkScrollIcon.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
-      this.sectionUseScroll(); //Trigger Change event
-
+      this.sectionUseScroll();
       this.builder.settings.onChange();
     });
     const colorpicker = this.builder.editor.colorpicker(); // Section Background Color
@@ -4584,7 +4564,6 @@ class EditSection {
         section.style.backgroundImage = ''; //remove gradient
 
         btnSectionBgColor.style.backgroundColor = s; // preview
-        //Trigger Change event
 
         this.builder.onChange();
       }, bgcolor);
@@ -4603,8 +4582,7 @@ class EditSection {
             overlay.style.backgroundColor = '';
             overlay.style.backgroundImage = ''; //remove gradient
           });
-        } //Trigger Change event
-
+        }
 
         this.builder.onChange();
       });
@@ -4621,8 +4599,7 @@ class EditSection {
       } else {
         section.removeAttribute('id');
         info.innerHTML = '';
-      } //Trigger Change event
-
+      }
 
       this.builder.onChange();
     });
@@ -4646,8 +4623,7 @@ class EditSection {
       }); // save
 
       section.setAttribute('data-class', newClasses);
-      if (section.getAttribute('data-class') === '') section.removeAttribute('data-class'); //Trigger Change event
-
+      if (section.getAttribute('data-class') === '') section.removeAttribute('data-class');
       this.builder.onChange();
     });
     inpSectionId.addEventListener('keyup', () => {
@@ -4696,8 +4672,7 @@ class EditSection {
         } else {
           section.classList.remove('desktop-box-reverse');
         }
-      } //Trigger Change event
-
+      }
 
       this.builder.settings.onChange();
     }); // Section Visibility
@@ -4736,8 +4711,7 @@ class EditSection {
       }
 
       btnVisible.classList.add('on');
-      btnHidden.classList.remove('on'); //Trigger Change event
-
+      btnHidden.classList.remove('on');
       this.builder.onChange();
     });
     btnHidden.addEventListener('click', () => {
@@ -4759,8 +4733,7 @@ class EditSection {
       }
 
       btnVisible.classList.remove('on');
-      btnHidden.classList.add('on'); //Trigger Change event
-
+      btnHidden.classList.add('on');
       this.builder.onChange();
     }); // Boxes per line
 
@@ -4838,8 +4811,7 @@ class EditSection {
             section.classList.add(`desktop-boxes-${val}`);
             section.classList.add('desktop-boxes-wrap');
           }
-        } //Trigger Change event
-
+        }
 
         this.builder.onChange();
       });
@@ -5142,82 +5114,59 @@ class EditSection {
     }, 1000); // this.builder.scrollTo(activeSection);
   }
 
-  sectionUp() {
-    const activeSection = this.builder.activeSection;
-    let currPrev = activeSection.previousElementSibling;
+  sectionDelete() {
+    let activeSection = this.builder.activeSection;
+    let hasPin = this.builder.hasPin();
 
-    if (currPrev) {
-      while (!dom$n.hasClass(currPrev, 'is-section')) {
-        if (!currPrev.previousElementSibling) break;
-        currPrev = currPrev.previousElementSibling;
+    if (hasPin) {
+      // After a section is deleted, the scroll goes to the previous section
+      let scrollTarget;
+
+      if (activeSection.parentNode.classList.contains('pin-wrap')) {
+        scrollTarget = activeSection.parentNode.previousElementSibling;
+        if (scrollTarget) if (scrollTarget.classList.contains('pin-wrap')) scrollTarget = scrollTarget.querySelector('.is-section');
+      } else {
+        scrollTarget = activeSection.previousElementSibling;
       }
-    }
 
-    if (currPrev && !dom$n.hasClass(currPrev, 'is-static')) {
-      activeSection.parentNode.insertBefore(activeSection, currPrev); //Trigger Render event
+      if (scrollTarget) this.builder.markScrollTarget(scrollTarget);
+    } // Remove section
 
-      this.builder.settings.onRender();
-      this.builder.refreshAnim();
-      this.builder.scrollTo(activeSection, 600);
-    }
-  }
 
-  sectionDown() {
-    const activeSection = this.builder.activeSection;
-    let currNext = activeSection.nextElementSibling;
-
-    if (currNext) {
-      while (!dom$n.hasClass(currNext, 'is-section')) {
-        if (!currNext.nextElementSibling) break;
-        currNext = currNext.previousElementSibling;
-      }
+    if (activeSection.parentNode.classList.contains('pin-wrap')) {
+      const pin = activeSection.parentNode;
+      pin.parentNode.removeChild(pin);
+    } else {
+      activeSection.parentNode.removeChild(activeSection);
     }
 
-    if (currNext && !dom$n.hasClass(currNext, 'is-static')) {
-      activeSection.parentNode.insertBefore(currNext, activeSection); //Trigger Render event
+    this.builder.settings.onRender();
 
-      this.builder.settings.onRender();
+    if (hasPin) {
+      this.builder.scrollToMarkedTarget();
+    } else {
       this.builder.refreshAnim();
-      this.builder.scrollTo(activeSection, 600);
     }
-
-    return false;
-  }
-
-  sectionTop() {
-    const activeSection = this.builder.activeSection;
-    let refSection = this.builder.wrapperEl.querySelector('.is-section:not(.is-section-navbar)'); //get first
-
-    activeSection.parentNode.insertBefore(activeSection, refSection); //Trigger Render event
-
-    this.builder.settings.onRender();
-    this.builder.refreshAnim();
-    this.builder.scrollTo(activeSection, 600);
-  }
-
-  sectionBottom() {
-    const activeSection = this.builder.activeSection; // let nodes = this.builder.wrapperEl.querySelectorAll('.is-section:not(.is-static)');
-
-    let nodes = Array.from(this.builder.wrapperEl.children).filter(item => {
-      return item.classList.contains('is-section');
-    });
-    let last = nodes[nodes.length - 1];
-    activeSection.parentNode.insertBefore(activeSection, last.nextElementSibling); //Trigger Render event
-
-    this.builder.settings.onRender();
-    this.builder.refreshAnim();
-    this.builder.scrollTo(activeSection, 600);
   }
 
   sectionDuplicate() {
     const activeSection = this.builder.activeSection;
+    let hasPin = this.builder.hasPin();
     let copiedSection = activeSection.cloneNode(true);
     copiedSection.setAttribute('data-section-copied', '1');
     let parent = activeSection.parentNode;
-    parent.insertBefore(copiedSection, activeSection.nextElementSibling);
+
+    if (parent.classList.contains('pin-wrap')) {
+      parent = parent.parentNode;
+      parent.insertBefore(copiedSection, activeSection.parentNode.nextElementSibling);
+    } else {
+      parent.insertBefore(copiedSection, activeSection.nextElementSibling);
+    }
+
     let section = this.builder.doc.querySelector('[data-section-copied]');
     section.removeAttribute('data-section-copied');
-    dom$n.removeClass(section, 'section-active'); // Code Blocks Handling
+    dom$n.removeClass(section, 'section-active');
+    this.builder.markScrollTarget(section); // Code Blocks Handling
 
     let codeBlocks = section.querySelectorAll('.is-overlay-content[data-module]');
     codeBlocks.forEach(element => {
@@ -5257,12 +5206,17 @@ class EditSection {
       e.preventDefault();
       e.stopImmediatePropagation();
       return false;
-    }); //Trigger Render event
-
+    });
     this.builder.settings.onRender();
-    this.builder.refreshAnim();
-    this.builder.hideModal(this.modalEditSection);
-    this.builder.scrollTo(section, 600); // Change
+
+    if (hasPin) {
+      this.builder.scrollToMarkedTarget();
+    } else {
+      this.builder.refreshAnim();
+      this.builder.scrollTo(section, 600);
+    }
+
+    this.builder.hideModal(this.modalEditSection); // Change
 
     activeSection.classList.remove('section-select');
     activeSection.classList.remove('box-select');
@@ -5277,6 +5231,179 @@ class EditSection {
     }
   }
 
+  sectionTop_Pin() {
+    let activeSection = this.builder.activeSection;
+    this.builder.markScrollTarget(activeSection);
+
+    if (activeSection.parentNode.classList.contains('pin-wrap')) {
+      activeSection = activeSection.parentNode;
+    } // let refSection = this.builder.wrapperEl.querySelector('.is-section:not(.is-section-navbar)'); //get first
+
+
+    let nodes = Array.from(this.builder.wrapperEl.children).filter(item => {
+      return (item.classList.contains('is-section') || item.classList.contains('pin-wrap')) && !item.classList.contains('is-section-navbar');
+    });
+    if (nodes.length === 0) return;
+    let refSection = nodes[0];
+    activeSection.parentNode.insertBefore(activeSection, refSection);
+    this.builder.settings.onRender();
+    this.builder.scrollToMarkedTarget();
+  }
+
+  sectionUp_Pin() {
+    let activeSection = this.builder.activeSection;
+    this.builder.markScrollTarget(activeSection);
+
+    if (activeSection.parentNode.classList.contains('pin-wrap')) {
+      activeSection = activeSection.parentNode;
+    }
+
+    let currPrev = activeSection.previousElementSibling;
+
+    if (currPrev) {
+      while (!(currPrev.classList.contains('is-section') || currPrev.classList.contains('pin-wrap'))) {
+        if (!currPrev.previousElementSibling) break;
+        currPrev = currPrev.previousElementSibling;
+      }
+    }
+
+    if (currPrev && !dom$n.hasClass(currPrev, 'is-static')) {
+      activeSection.parentNode.insertBefore(activeSection, currPrev);
+      this.builder.settings.onRender();
+      this.builder.scrollToMarkedTarget();
+    }
+  }
+
+  sectionBottom_Pin() {
+    let activeSection = this.builder.activeSection;
+    this.builder.markScrollTarget(activeSection);
+
+    if (activeSection.parentNode.classList.contains('pin-wrap')) {
+      activeSection = activeSection.parentNode;
+    } // let nodes = this.builder.wrapperEl.querySelectorAll('.is-section:not(.is-static)');
+
+
+    let nodes = Array.from(this.builder.wrapperEl.children).filter(item => {
+      return item.classList.contains('is-section') || item.classList.contains('pin-wrap');
+    });
+    let last = nodes[nodes.length - 1];
+    activeSection.parentNode.insertBefore(activeSection, last.nextElementSibling);
+    this.builder.settings.onRender();
+    this.builder.scrollToMarkedTarget();
+  }
+
+  sectionDown_Pin() {
+    let activeSection = this.builder.activeSection;
+    this.builder.markScrollTarget(activeSection);
+
+    if (activeSection.parentNode.classList.contains('pin-wrap')) {
+      activeSection = activeSection.parentNode;
+    }
+
+    let currNext = activeSection.nextElementSibling;
+
+    if (currNext) {
+      while (!(currNext.classList.contains('is-section') || currNext.classList.contains('pin-wrap'))) {
+        if (!currNext.nextElementSibling) break;
+        currNext = currNext.previousElementSibling;
+      }
+    }
+
+    if (currNext && !dom$n.hasClass(currNext, 'is-static')) {
+      activeSection.parentNode.insertBefore(currNext, activeSection);
+      this.builder.settings.onRender();
+      this.builder.scrollToMarkedTarget();
+    }
+  }
+
+  sectionUp() {
+    let hasPin = this.builder.hasPin();
+
+    if (hasPin) {
+      this.sectionUp_Pin();
+      return;
+    }
+
+    const activeSection = this.builder.activeSection;
+    let currPrev = activeSection.previousElementSibling;
+
+    if (currPrev) {
+      while (!dom$n.hasClass(currPrev, 'is-section')) {
+        if (!currPrev.previousElementSibling) break;
+        currPrev = currPrev.previousElementSibling;
+      }
+    }
+
+    if (currPrev && !dom$n.hasClass(currPrev, 'is-static')) {
+      activeSection.parentNode.insertBefore(activeSection, currPrev);
+      this.builder.settings.onRender();
+      this.builder.refreshAnim();
+      this.builder.scrollTo(activeSection, 600);
+    }
+  }
+
+  sectionDown() {
+    let hasPin = this.builder.hasPin();
+
+    if (hasPin) {
+      this.sectionDown_Pin();
+      return;
+    }
+
+    const activeSection = this.builder.activeSection;
+    let currNext = activeSection.nextElementSibling;
+
+    if (currNext) {
+      while (!dom$n.hasClass(currNext, 'is-section')) {
+        if (!currNext.nextElementSibling) break;
+        currNext = currNext.previousElementSibling;
+      }
+    }
+
+    if (currNext && !dom$n.hasClass(currNext, 'is-static')) {
+      activeSection.parentNode.insertBefore(currNext, activeSection);
+      this.builder.settings.onRender();
+      this.builder.refreshAnim();
+      this.builder.scrollTo(activeSection, 600);
+    }
+  }
+
+  sectionTop() {
+    let hasPin = this.builder.hasPin();
+
+    if (hasPin) {
+      this.sectionTop_Pin();
+      return;
+    }
+
+    const activeSection = this.builder.activeSection;
+    let refSection = this.builder.wrapperEl.querySelector('.is-section:not(.is-section-navbar)'); //get first
+
+    activeSection.parentNode.insertBefore(activeSection, refSection);
+    this.builder.settings.onRender();
+    this.builder.refreshAnim();
+    this.builder.scrollTo(activeSection, 600);
+  }
+
+  sectionBottom() {
+    let hasPin = this.builder.hasPin();
+
+    if (hasPin) {
+      this.sectionBottom_Pin();
+      return;
+    }
+
+    const activeSection = this.builder.activeSection;
+    let nodes = Array.from(this.builder.wrapperEl.children).filter(item => {
+      return item.classList.contains('is-section') || item.classList.contains('pin-wrap');
+    });
+    let last = nodes[nodes.length - 1];
+    activeSection.parentNode.insertBefore(activeSection, last.nextElementSibling);
+    this.builder.settings.onRender();
+    this.builder.refreshAnim();
+    this.builder.scrollTo(activeSection, 600);
+  }
+
   sectionAnimStart(s) {
     const activeSection = this.builder.activeSection;
     activeSection.removeAttribute('data-bottom-top');
@@ -19390,6 +19517,7 @@ class Util$1 {
     }
     const dom = this.dom;
     dom.removeClass(modal, 'active');
+    modal.style.display = '';
   }
 
   // attachInputTextClear(inp) {
@@ -37157,6 +37285,7 @@ const renderSnippetPanel = builder => {
   }
   let html_snippets = '' + '<div class="is-dropdown selectsnippet" style="position:absolute;top:0;right:0;padding: 0;width:100%;z-index:2;">' + '<button tabindex="0" class="dropdown-toggle no-outline" title="' + util.out('Snippet Categories') + '" type="button" aria-haspopup="true" data-value="' + defaultcatval + '">' + '<span>' + util.out(defaultcat) + '</span>' + '</button>' + '<ul class="dropdown-menu" role="listbox" title="' + util.out('Snippets') + '" aria-expanded="false">' + catitems + '</ul>' + '</div>' + (sidePanel === 'right' ? '<div id="divSnippetScrollUp" role="button" tabindex="-1" style="top:calc(50% - 27px);right:25px;">&#9650;</div>' + '<div id="divSnippetScrollDown" role="button" tabindex="-1" style="top:calc(50% + 27px);right:25px;">&#9660;</div>' + '<div id="divSnippetHandle" role="button" tabindex="-1" title="' + util.out('Snippets') + '" data-title="' + util.out('Snippets') + '" style="' + hideHandle + '">' + '<svg class="is-icon-flex"><use xlink:href="#ion-ios-arrow-left"></use></svg>' + '</div>' : '<div id="divSnippetScrollUp" role="button" tabindex="-1" style="top:calc(50% - 27px);left:10px;">&#9650;</div>' + '<div id="divSnippetScrollDown" role="button" tabindex="-1" style="top:calc(50% + 27px);left:10px;">&#9660;</div>' + '<div id="divSnippetHandle" role="button" tabindex="-1" title="' + util.out('Snippets') + '" data-title="' + util.out('Snippets') + '" style="' + hideHandle + '">' + '<svg class="is-icon-flex"><use xlink:href="#ion-ios-arrow-right"></use></svg>' + '</div>') + '<div class="is-design-list" tabindex="0">' + '</div>';
   let snippetPanel = document.querySelector(builder.opts.snippetList);
+  snippetPanel.innerHTML = ''; //clear
   dom.appendHtml(snippetPanel, html_snippets);
   const dropDown = new Select(snippetPanel.querySelector('.selectsnippet'));
   dropDown.element.addEventListener('change', () => {
@@ -88127,28 +88256,30 @@ class Rte {
     return bExist;
   }
   positionToolbar() {
+    const leftSidebarAdj = this.builder.leftSidebarAdj || 0;
+    const leftSidebarAdj2 = this.builder.leftSidebarAdj2 || 0;
     const viewportWidth = document.body.clientWidth; //window.innerWidth;
     const viewportHeight = window.innerHeight;
     if (this.builder.opts.toolbar === 'left' || this.builder.opts.toolbar === 'right') {
       let h = this.rteTool.offsetHeight;
       let top = viewportHeight / 2 - h / 2;
-      this.rteTool.style.left = '';
+      this.rteTool.style.left = leftSidebarAdj2 + 'px';
       this.rteTool.style.top = top + 'px';
 
       // Element Toolbar
       h = this.elementRteTool.offsetHeight;
       top = viewportHeight / 2 - h / 2;
-      this.elementRteTool.style.left = '';
+      this.elementRteTool.style.left = leftSidebarAdj2 + 'px';
       this.elementRteTool.style.top = top + 'px';
     } else {
       let w = this.rteTool.offsetWidth;
-      let left = viewportWidth / 2 - w / 2;
+      let left = viewportWidth / 2 - w / 2 + leftSidebarAdj;
       this.rteTool.style.top = '';
       this.rteTool.style.left = left + 'px';
 
       // Element Toolbar
       w = this.elementRteTool.offsetWidth;
-      left = viewportWidth / 2 - w / 2;
+      left = viewportWidth / 2 - w / 2 + leftSidebarAdj;
       this.elementRteTool.style.top = '';
       this.elementRteTool.style.left = left + 'px';
     }
@@ -95123,7 +95254,7 @@ class ContentBuilder {
       if (this.dom.hasClass(builder, 'preview')) this.preview = true;
     });
     if (!this.preview) {
-      if (this.opts.snippetJSON.snippets.length > 0) {
+      if (this.opts.snippetJSON) if (this.opts.snippetJSON.snippets.length > 0) {
         renderSnippetPanel(this); // Render Snippet Panel
       }
     }
@@ -95220,7 +95351,7 @@ class ContentBuilder {
         this.util.hidePops();
       });
       this.win.addEventListener('resize', this.doWindowResize = () => {
-        this.util.clearActiveCell();
+        // this.util.clearActiveCell();
         this.util.clearControls();
 
         // Disable on mobile
@@ -96976,8 +97107,10 @@ class ContentBuilder {
   }
   loadSnippets(snippetFile) {
     if (this.preview) return;
-    let snippetPanel = document.querySelector(this.opts.snippetList);
-    if (snippetPanel) return; // do not render if already rendered (just protection)
+    if (this.opts.snippetList === '#divSnippetList') {
+      let snippetPanel = document.querySelector(this.opts.snippetList);
+      if (snippetPanel) return; // do not render if already rendered (just protection)
+    }
 
     if (this.isScriptAlreadyIncluded(snippetFile)) return;
     const script = document.createElement('script');
@@ -112871,17 +113004,22 @@ ${currentHtml}
       this.builder.editor.saveForUndo();
       this.builder.editsection.sectionDuplicate();
       this.builder.sectionStack();
-      setTimeout(() => {
-        this.builder.refreshAnim();
-      }, 600);
       this.builder.settings.onChange();
       return false;
     } else if (intent === 'remove_section') {
       this.builder.editor.saveForUndo();
-      const activeSection = this.builder.activeSection;
-      activeSection.parentNode.removeChild(activeSection);
+      this.builder.editsection.sectionDelete();
+      this.builder.sectionStack(); //--- clear ---
+
       this.builder.activeSection = null;
       this.builder.activeBox = null;
+      this.builder.editor.inspectedElement = null;
+      this.builder.editor.activeElement = null;
+      this.builder.editor.activeCol = null;
+      this.builder.wrapperEl.classList.remove('hard-select');
+      this.builder.wrapperEl.classList.remove('is-container-edit');
+      this.builder.wrapperEl.classList.remove('is-clean-edit'); //--- /clear ---
+
       this.builder.settings.onChange();
       return false;
     } else if (intent === 'add_content') {
@@ -115194,6 +115332,200 @@ ${currentHtml}
 
 }
 
+class IframePanel {
+  constructor(opts = {}, builder) {
+    let defaults = {
+      src: '',
+      page: '.is-wrapper',
+      onReady: () => {}
+    };
+    this.opts = Object.assign(this, defaults, opts);
+    this.builder = builder;
+    const builderStuff = this.builder.builderStuff;
+    this.builderStuff = builderStuff;
+    let editPanel = document.querySelector('#editPanel');
+
+    if (!editPanel) {
+      const html = `
+                <style>
+                    #editPanel {
+                        display:flex;
+                        flex-direction:column;
+                        justify-content:center;
+                        align-items:center;
+                        /* width: 100vw; */
+                        width: calc(100% - 60px) !important;
+                        left:60px !important;
+                        height:100vh;
+                        position:fixed;
+                        top:0;
+                        background:#f5f5f5;
+                    }
+
+                    .is-content-view {
+                        transition: all 300ms ease 0s;
+                        overflow: hidden;
+                        margin-top: 1.5rem;
+                        background: #f5f5f5;
+                        position: relative;
+                    }
+                    .is-content-view > div {
+                        background-color: rgb(230 231 233);
+                        border-top-left-radius: 8px;
+                        border-top-right-radius: 8px;
+                        height: 1.75rem;
+                        display: flex;
+                        justify-content: center;
+                    }
+
+                    .is-responsive-toolbar {
+                        display: inline-flex;
+                        margin-left: 15px;
+                        margin-right: 15px;
+                        position: relative;
+                        background: transparent;
+                    }
+                    .is-responsive-toolbar button {
+                        background: transparent !important;
+                        width: 40px !important;
+                        height: auto !important;
+                    }
+                    .is-responsive-toolbar button.active {
+                        background: #c0c0c05c !important;
+                    }
+                    .is-responsive-toolbar button svg {
+                        width: 17px;
+                        height: 17px;
+                        opacity: 0.75;
+                        fill: none !important;
+                    }
+                    .is-content-view iframe {
+                        width: 100%;
+                        height: calc(100% - 28px);
+                        position: absolute;
+                    }
+                </style>
+
+                <div id="editPanel">
+
+                    <div class="is-content-view desktop">
+                        <div>
+
+                            <div class="is-responsive-toolbar is-tool">
+                                <button title="${out('Desktop')}" class="active" data-command="desktop">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-desktop" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                        <rect x="3" y="4" width="18" height="12" rx="1"></rect>
+                                        <line x1="7" y1="20" x2="17" y2="20"></line>
+                                        <line x1="9" y1="16" x2="9" y2="20"></line>
+                                        <line x1="15" y1="16" x2="15" y2="20"></line>
+                                    </svg>
+                                </button>
+
+                                <button title="${out('Tablet (Landscape)')}" data-command="tablet-landscape">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-tablet-landscape" style="transform:rotate(-90deg)" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                        <rect x="5" y="3" width="14" height="18" rx="1"></rect>
+                                        <circle cx="12" cy="17" r="1"></circle>
+                                    </svg>
+                                </button>
+
+                                <button title="${out('Tablet (Portrait)')}" data-command="tablet">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-tablet" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                        <rect x="5" y="3" width="14" height="18" rx="1"></rect>
+                                        <circle cx="12" cy="17" r="1"></circle>
+                                    </svg>
+                                </button>
+
+                                <button title="${out('Mobile')}" data-command="mobile">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-mobile" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                        <rect x="6" y="3" width="12" height="18" rx="2"></rect>
+                                        <line x1="11" y1="4" x2="13" y2="4"></line>
+                                        <line x1="12" y1="17" x2="12" y2="17.01"></line>
+                                    </svg>
+                                </button>
+                            </div>
+                        
+                        </div>
+                        <iframe id="ifrBuilder" src="about:blank"></iframe>
+                    </div>
+
+                </div>
+                `;
+      builderStuff.insertAdjacentHTML('beforeend', html); // document.body.insertAdjacentHTML('beforeend', html);
+
+      editPanel = document.querySelector('#editPanel');
+      this.editPanel = editPanel;
+      this.loadIframe();
+      let tool = document.querySelector('.is-responsive-toolbar');
+      let btns = tool.querySelectorAll('button');
+      btns.forEach(btn => {
+        btn.addEventListener('click', () => {
+          const command = btn.getAttribute('data-command');
+          const contentView = editPanel.querySelector('.is-content-view');
+          let elm = tool.querySelector('button.active');
+          if (elm) elm.classList.remove('active');
+          contentView.classList.remove('desktop');
+          contentView.classList.remove('tablet-landscape');
+          contentView.classList.remove('tablet');
+          contentView.classList.remove('mobile');
+
+          if (command === 'desktop') {
+            contentView.classList.add('desktop');
+          } else if (command === 'tablet-landscape') {
+            contentView.classList.add('tablet-landscape');
+          } else if (command === 'tablet') {
+            contentView.classList.add('tablet');
+          } else if (command === 'mobile') {
+            contentView.classList.add('mobile');
+          }
+
+          btn.classList.add('active');
+        });
+      });
+    }
+  }
+
+  loadIframe() {
+    let iframe = this.editPanel.querySelector('iframe');
+
+    if (this.src !== '') {
+      iframe.setAttribute('src', this.src);
+    } else {
+      alert('Please specify src attribute.');
+    }
+
+    document.body.style.overflowY = 'hidden';
+    let checkLoad = setInterval(() => {
+      if (iframe.contentDocument.readyState === 'complete') {
+        iframe.contentDocument.body.classList.add('iframe-body'); // add .iframe-body class that is required by box/flex.css
+        // Check if editable container is ready
+
+        let wrapper = iframe.contentDocument.querySelector(this.opts.page);
+
+        if (wrapper) {
+          clearInterval(checkLoad);
+          this.onReady(iframe);
+        }
+
+        iframe.contentDocument.body.style.display = 'flex'; // this removes empty space at the bottom of the page
+      }
+    }, 200);
+  }
+
+  showTooltip() {
+    let tool = document.querySelector('.is-responsive-toolbar');
+    let elms = tool.querySelectorAll('[title]');
+    Array.prototype.forEach.call(elms, elm => {
+      elm.setAttribute('data-title', elm.getAttribute('title'));
+      this.builder.editor.tooltip.set(elm, 5, 3);
+    });
+  }
+
+}
+
 const dom = new Dom$1();
 
 class ContentBox {
@@ -118223,131 +118555,156 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
 
     if (this.settings.contentStyleWithSample) {
       this.settings.contentStyles = this.settings.contentStylesAlt;
-    } // Experimental for iframe
+    } // Hidden placement for builder things
 
 
-    let win, doc;
+    let builderStuff = document.querySelector('#_cbhtml'); // All editing controls will be placed within <div id="_cbhtml">...</div>
 
-    if (this.iframe) {
-      win = this.iframe.contentWindow;
-      let iframeDocument = this.iframe.contentDocument || this.iframe.contentWindow.document;
-      doc = iframeDocument;
-      this.iframeDocument = iframeDocument;
-    } else {
-      win = window;
-      doc = document;
+    if (!builderStuff) {
+      builderStuff = document.createElement('div');
+      builderStuff.id = '_cbhtml';
+      builderStuff.style.visibility = 'hidden';
+      builderStuff.className = 'is-ui';
+      document.body.appendChild(builderStuff);
+      builderStuff = document.querySelector('#_cbhtml');
     }
 
-    this.win = win;
-    this.doc = doc; // Content stuff
+    this.builderStuff = builderStuff;
+    prepareSvgIcons$1(this); // Prepare icons (embed svg definitions for icons) 
 
-    if (this.iframe) {
-      let contentStuff = doc.querySelector('.content-stuff');
+    this.sidebar = new SideBar(this);
+    this.animateScroll = new AnimateScroll(this);
+    this.timeline = new Timeline(this);
+    this.util = new Util(this);
+    this.controlpanel = new ControlPanel(this);
 
-      if (!contentStuff) {
-        contentStuff = document.createElement('div');
-        contentStuff.className = 'content-stuff is-ui';
-        contentStuff.id = '_cbhtml';
-        doc.body.appendChild(contentStuff);
-      }
+    if (!this.pageTemplate) {
+      this.pageTemplate = this.util.getPageTemplate(this.framework);
+    } // IFRAME
 
-      this.contentStuff = contentStuff;
-      this.stuff = new ContentStuff(this);
-    }
 
-    this.wrapperEl = this.doc.querySelector(this.wrapper);
+    const initialStart = ifr => {
+      if (ifr) this.iframe = ifr;
+      let win, doc;
 
-    if (dom.hasClass(this.wrapperEl, 'preview')) {
-      this.preview = true;
-      return;
-    }
+      if (this.iframe) {
+        win = this.iframe.contentWindow;
+        let iframeDocument = this.iframe.contentDocument || this.iframe.contentWindow.document;
+        doc = iframeDocument;
+        this.iframeDocument = iframeDocument;
+      } else {
+        win = window;
+        doc = document;
+      }
 
-    dom.addClass(this.wrapperEl, 'is-wrapper');
-    dom.addClass(this.wrapperEl, 'is-edit'); //Extend onRender with built-in plugins
+      this.win = win;
+      this.doc = doc; // Content stuff
 
-    let old = this.settings.onRender;
+      if (this.iframe) {
+        let contentStuff = doc.querySelector('.content-stuff');
 
-    this.settings.onRender = () => {
-      old.call(this); // call user's defined onRender
+        if (!contentStuff) {
+          contentStuff = document.createElement('div');
+          contentStuff.className = 'content-stuff is-ui';
+          contentStuff.id = '_cbhtml';
+          doc.body.appendChild(contentStuff);
+        }
 
-      try {
-        // Built-in onRender
-        //Run parts of box(-flex).js
-        this.box(); // //Run built-in plugin inside the builder
-        // setTimeout(()=>{
-        //     if (this.win.skrollr) {
-        //         let obj = this.win.skrollr.get();
-        //         if(obj) obj.refresh();
-        //     }
-        // }, 100);
-      } catch (e) {// Do Nothing
+        this.contentStuff = contentStuff;
+        this.stuff = new ContentStuff(this);
       }
-    }; //Extend onChange with built-in plugins
 
+      this.wrapperEl = this.doc.querySelector(this.wrapper);
 
-    let old2 = this.settings.onChange;
+      if (dom.hasClass(this.wrapperEl, 'preview')) {
+        this.preview = true;
+        return;
+      }
 
-    this.settings.onChange = () => {
-      old2.call(this);
-      setTimeout(() => {
-        // this.quickPosTool();
-        this.editor.livePreview.previewRefresh();
-      }, 100);
-    }; // Hidden placement for builder things
+      dom.addClass(this.wrapperEl, 'is-wrapper');
+      dom.addClass(this.wrapperEl, 'is-edit'); //Extend onRender with built-in plugins
 
+      let old = this.settings.onRender;
 
-    let builderStuff = document.querySelector('#_cbhtml'); // All editing controls will be placed within <div id="_cbhtml">...</div>
+      this.settings.onRender = () => {
+        old.call(this); // call user's defined onRender
 
-    if (!builderStuff) {
-      builderStuff = document.createElement('div');
-      builderStuff.id = '_cbhtml';
-      builderStuff.style.visibility = 'hidden';
-      builderStuff.className = 'is-ui';
-      document.body.appendChild(builderStuff);
-      builderStuff = document.querySelector('#_cbhtml');
-    }
+        try {
+          // Built-in onRender
+          //Run parts of box(-flex).js
+          this.box(); // //Run built-in plugin inside the builder
+          // setTimeout(()=>{
+          //     if (this.win.skrollr) {
+          //         let obj = this.win.skrollr.get();
+          //         if(obj) obj.refresh();
+          //     }
+          // }, 100);
+        } catch (e) {// Do Nothing
+        }
+      }; //Extend onChange with built-in plugins
 
-    this.builderStuff = builderStuff; // a hack to prevent html/body page get sliding
 
-    builderStuff.style.position = 'fixed';
-    setTimeout(() => {
-      builderStuff.style.position = '';
+      let old2 = this.settings.onChange;
+
+      this.settings.onChange = () => {
+        old2.call(this);
+        setTimeout(() => {
+          // this.quickPosTool();
+          this.editor.livePreview.previewRefresh();
+        }, 100);
+      }; // a hack to prevent html/body page get sliding
+
 
-      if (this.wrapperEl.getBoundingClientRect().left < 0) {
+      if (!this.iframeSrc) {
         builderStuff.style.position = 'fixed';
         setTimeout(() => {
           builderStuff.style.position = '';
+
+          if (this.wrapperEl.getBoundingClientRect().left < 0) {
+            builderStuff.style.position = 'fixed';
+            setTimeout(() => {
+              builderStuff.style.position = '';
+            }, 1500);
+          }
         }, 1500);
       }
-    }, 1500);
-    prepareSvgIcons$1(this); // Prepare icons (embed svg definitions for icons) 
-
-    this.sidebar = new SideBar(this);
-    this.animateScroll = new AnimateScroll(this);
-    this.timeline = new Timeline(this);
-    this.util = new Util(this);
-    this.controlpanel = new ControlPanel(this);
+      /*
+      if(!window.data_basic) {
+          dom.addExternalScripts([this.snippetUrl], ()=>{
+                   this.editorSetup();
+                         this.init();
+              
+          });
+      } else {
+               this.editorSetup();
+               this.init();
+      }
+      */
 
-    if (!this.pageTemplate) {
-      this.pageTemplate = this.util.getPageTemplate(this.framework);
-    }
 
-    if (!window.data_basic) {
-      dom.addExternalScripts([this.snippetUrl], () => {
-        this.editorSetup();
-        this.init();
-      });
-    } else {
       this.editorSetup();
       this.init();
-    }
+      window.contentbox = this;
+      window.applyBoxImage = this.boxImage.bind(this);
+      window.applyLargerImage = this.applyLargerImage.bind(this);
+      window.returnUrl = this.returnUrl.bind(this);
+      this.win.applyBoxImage = this.boxImage.bind(this);
+      window._contentbox = this;
+    };
 
-    window.contentbox = this;
-    window.applyBoxImage = this.boxImage.bind(this);
-    window.applyLargerImage = this.applyLargerImage.bind(this);
-    window.returnUrl = this.returnUrl.bind(this);
-    this.win.applyBoxImage = this.boxImage.bind(this);
-    window._contentbox = this;
+    if (this.iframeSrc) {
+      let iframeSrc = this.iframeSrc;
+      this.iframePanel = new IframePanel({
+        src: iframeSrc,
+        page: '.is-wrapper',
+        onReady: ifr => {
+          initialStart(ifr);
+          this.iframePanel.showTooltip(); // Run here because this feature uses ContentBuilder
+        }
+      }, this);
+    } else {
+      initialStart();
+    }
   } // constructor
 
 
@@ -118644,6 +119001,8 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
       blockCodeEditorHeight: this.settings.blockCodeEditorHeight,
       blockCodeEditorMaxWidth: this.settings.blockCodeEditorMaxWidth,
       assetRefresh: this.settings.assetRefresh,
+      leftSidebarAdj: 30,
+      leftSidebarAdj2: 80,
       onContentClick: e => {
         if (this.settings.onContentClick) this.settings.onContentClick(e);
         this.doc.body.classList.remove('temporary-hide-tools');
@@ -118696,7 +119055,8 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
           }
         }
       }
-    }); // Live Preview
+    });
+    this.editor.loadSnippets(this.snippetUrl); // Live Preview
 
     const modalPagePreview = this.builderStuff.querySelector('.is-modal.content-preview');
     this.modalPagePreview = modalPagePreview;
@@ -119252,8 +119612,13 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
 
       this.wrapperEl.style.transition = 'none';
       const x = 300 * (1 - zoom) / 0.5;
-      this.wrapperEl.style.marginTop = `${x}px`;
-      this.wrapperEl.style.opacity = 1;
+      this.wrapperEl.style.marginTop = `${x}px`; // this.wrapperEl.style.opacity = 1;
+
+      this.wrapperEl.style.transition = 'all 400ms ease';
+      setTimeout(() => {
+        this.wrapperEl.style.opacity = 1;
+        this.wrapperEl.style.transition = '';
+      }, 100);
       let sidebar = builderStuff.querySelector('.is-sidebar');
       if (sidebar) sidebar.style.opacity = 1;
       this.builderStuff.style.visibility = 'visible'; // Remove the page-overlay
@@ -119645,7 +120010,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
         }
       };
 
-      let elmTool = document.querySelector('.is-element-tool');
+      let elmTool = this.doc.querySelector('.is-element-tool');
       let divImageTool = document.querySelector('#divImageTool');
       let divImageResizer = document.querySelector('#divImageResizer');
 
@@ -120318,7 +120683,10 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
       arrSections.push(newSection);
     } else if (newArea.indexOf('is-static') !== -1) {
       // Insert last
-      let lastSection = dom.getLastElement(this.wrapperEl, '.is-section');
+      let nodes = Array.from(this.wrapperEl.children).filter(item => {
+        return item.classList.contains('is-section') || item.classList.contains('pin-wrap');
+      });
+      let lastSection = nodes[nodes.length - 1];
 
       if (lastSection) {
         dom.appendHtml(lastSection, newArea, 'afterend');
@@ -120354,7 +120722,11 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
         let activeSection = this.activeSection;
 
         if (dom.hasClass(activeSection, 'is-static')) {
-          // Insert before
+          if (activeSection.parentNode.classList.contains('pin-wrap')) {
+            activeSection = activeSection.parentNode;
+          } // Insert before
+
+
           dom.appendHtml(activeSection, newArea, 'beforebegin');
           newSection = activeSection.previousElementSibling;
           arrSections.push(newSection); // Check up to 3 sections (in case a template has up to 3 sections)
@@ -120379,7 +120751,11 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
             }
           }
         } else {
-          // Insert afer
+          if (activeSection.parentNode.classList.contains('pin-wrap')) {
+            activeSection = activeSection.parentNode;
+          } // Insert afer
+
+
           dom.appendHtml(activeSection, newArea, 'afterend');
           newSection = activeSection.nextElementSibling;
           arrSections.push(newSection); // Check up to 3 sections (in case a template has up to 3 sections)
@@ -120636,10 +121012,18 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
     dom.removeClass(document.querySelectorAll('.is-sidebar-content'), 'active');
     document.body.style.overflowY = '';
     this.addSpace();
-    this.scrollTo(newSection, 600);
-    setTimeout(() => {
-      this.refreshAnim();
-    }, 600);
+    const hasPin = this.hasPin();
+
+    if (hasPin) {
+      this.markScrollTarget(newSection);
+      this.scrollToMarkedTarget();
+    } else {
+      this.scrollTo(newSection, 600);
+      setTimeout(() => {
+        this.refreshAnim();
+      }, 600);
+    }
+
     return newSection;
   } // addIdea
 
@@ -121141,6 +121525,16 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
   }
 
   loadStyles(mainCss, sectionCss) {
+    // Wait for IFRAME loaded
+    const wrapper = this.wrapperEl;
+
+    if (!wrapper) {
+      setTimeout(() => {
+        this.loadStyles(mainCss, sectionCss);
+      }, 100);
+      return;
+    }
+
     let links = this.doc.getElementsByTagName('link');
     let boxCssInBody;
 
@@ -121191,11 +121585,15 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
   loadHtml(html) {
     // Reset
     this.activeBox = null;
-    this.activeSection = null;
+    this.activeSection = null; // Wait for IFRAME loaded
+
     const wrapper = this.wrapperEl;
 
-    if (!wrapper.style.opacity) {
-      wrapper.style.opacity = '0';
+    if (!wrapper) {
+      setTimeout(() => {
+        this.loadHtml(html);
+      }, 100);
+      return;
     }
 
     let waitSlider = false;
@@ -121208,10 +121606,10 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
       } else {
         waitSlider = true; // console.log('not loaded');
       }
-    }
+    } // Wait for the ContentBuilder init complete
+
 
     if (!this.editor || waitSlider) {
-      // Wait for the ContentBuilder init complete
       setTimeout(() => {
         this.loadHtml(html);
       }, 100);
@@ -121267,9 +121665,17 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
       this.openPreview();
     }
 
+    if (this.win.pageReRender) {
+      this.win.pageReRender();
+    }
+
+    this.wrapperEl.style.transition = 'all 400ms ease';
     setTimeout(() => {
-      this.refreshAnim();
-    }, 600);
+      this.wrapperEl.style.opacity = 1;
+      setTimeout(() => {
+        wrapper.style.transition = '';
+      }, 400);
+    }, 400);
   }
 
   boxImage(url, err) {
@@ -121369,9 +121775,48 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
     return html;
   }
 
+  hasPin() {
+    if (this.wrapperEl.querySelector('.pin-wrap')) return true;
+    return false;
+  }
+
+  markScrollTarget(element) {
+    this.doc.querySelectorAll('.scroll-target').forEach(el => el.classList.remove('scroll-target'));
+    if (element) element.classList.add('scroll-target');
+  }
+
+  scrollToMarkedTarget() {
+    if (this.win.pageReRender) this.win.pageReRender();
+    let scrollTarget = this.doc.querySelector('.scroll-target');
+
+    if (scrollTarget) {
+      this.scrollTo(scrollTarget, 0);
+      scrollTarget.classList.remove('scroll-target');
+    }
+  }
+
   html(bForView) {
-    this.cleanupUnused();
-    const html = this.editor.readHtml(this.wrapperEl, bForView, true);
+    this.cleanupUnused(); // Clean pinned sections
+
+    const wrapperEl = this.wrapperEl.cloneNode(true); // Clone the child element
+
+    let pinWraps = wrapperEl.querySelectorAll('.pin-wrap');
+    pinWraps.forEach(pinWrap => {
+      const sectionElm = pinWrap.firstElementChild;
+      pinWrap.after(sectionElm);
+      pinWrap.parentNode.removeChild(pinWrap);
+    });
+    const sections = wrapperEl.querySelectorAll('.is-section');
+    sections.forEach(section => {
+      if (section.hasAttribute('data-section-clone')) section.parentNode.removeChild(section);
+
+      if (section.hasAttribute('data-section-original')) {
+        section.style.display = '';
+        section.removeAttribute('data-section-original');
+      }
+    });
+    const html = this.editor.readHtml(wrapperEl, bForView, true); // const html = this.editor.readHtml(this.wrapperEl, bForView, true);
+
     return html;
   }
 
@@ -121448,7 +121893,9 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
 
     this.builderStuff.innerHTML = '';
     dom.removeClass(document.body, 'sidebar-active');
-    document.body.removeAttribute('data-skrollrr-off'); // Remove special css
+    document.body.removeAttribute('data-skrollrr-off');
+    document.body.style.overflowY = ''; // in iframe use, overflowY is set 'hidden'
+    // Remove special css
 
     const cbContentStyle = this.doc.querySelector('#_contentbox_css');
     if (cbContentStyle) cbContentStyle.parentNode.removeChild(cbContentStyle);