@innovastudio/contentbox 1.6.13 → 1.6.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.13",
+  "version": "1.6.15",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [

package/public/contentbox/contentbox.css

@@ -744,7 +744,7 @@ body.controlpanel .is-content-view.fullview iframe {
   height: 25px;
   margin-top: 3px;
 }
-.builder-ui .custom-select .select-styled:focus {
+.builder-ui .custom-select .select-styled:focus-visible {
   outline: #3e93f7 2px solid;
   outline-offset: -1px;
 }

package/public/contentbox/contentbox.esm.js

@@ -628,6 +628,9 @@ const prepareSvgIcons$1 = builder => {
                 <path d="M17 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836"></path>
                 <path d="M13 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836"></path>
             </symbol>
+            <symbol id="icon-download" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /><path d="M7 11l5 5l5 -5" /><path d="M12 4l0 12" />
+            </symbol>
 
             </defs>
         </svg>`;
@@ -858,7 +861,7 @@ class SideBar {
         sideIndex++;
       });
       html += '</div>';
-      html += '' + '<div id="divSidebarSections" class="is-sidebar-content is-area-2nd ' + this.builder.templateThumbnailSize + '" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe id="ifrIdeasPanel" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divSidebarSnippets" class="is-sidebar-content is-area-2nd scroll-darker" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;">' + '' + '</div>' + '<div id="divSidebarSource" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<div style="position:absolute;width:240px;height:35px;right:10px;top:5px;z-index:1;display:flex;">' + '<button title="' + out('Cancel') + '" id="btnViewHtmlCancel" tabindex="-1" style="height:38px" class="classic-secondary"> ' + out('Cancel') + ' </button>' + '<button title="' + out('Ok') + '" id="btnViewHtmlOk" tabindex="-1" style="height:38px" class="classic-primary"> ' + out('Ok') + ' </button>' + '</div>' + '<div style="height:100%;box-sizing:border-box;border-top:#f3f3f3 50px solid;position:relative">' + '<textarea id="inpViewHtml" tabindex="-1" style="width:100%;height:100%;resize: none;"></textarea>' + '</div>' + '</div>' + '</div>' + '<div id="divSidebarTypography" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div class="scroll-darker">' + '<div style="padding: 15px 0 0 20px">' + '<div class="is-sidebar-title" style="margin-bottom:12px;">' + out('Typography Styles') + '</div>' + '<div>' + out('Apply to') + ':</div>' + '<div style="display:flex;justify-content:space-between;align-items: center;">' + '<div class="typo-target-default" style="display:flex">' + '<label><input type="radio" tabindex="0" name="typoTarget" value="page"> <span>' + out('Page') + '</span></label>' + '<label><input type="radio" tabindex="0" name="typoTarget" value="section" checked> <span>' + out('Section') + '</span></label>' + '</div>' + '<div class="typo-target-box" style="display: flex;">' + '<span>' + out('Active Box') + '</span>' + '</div>' + '<button title="' + out('Clear') + '" tabindex="0" id="btnTypoClear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div id="divSelector"></div>' + '<div id="divStyles"></div>' + '</div>' + '</div>';
+      html += '' + '<div id="divSidebarSections" class="is-sidebar-content is-area-2nd ' + this.builder.templateThumbnailSize + '" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe id="ifrIdeasPanel" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divSidebarSnippets" class="is-sidebar-content is-area-2nd scroll-darker" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;">' + '' + '</div>' + '<div id="divSidebarSource" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<div style="position:absolute;width:240px;height:35px;right:10px;top:5px;z-index:1;display:flex;">' + '<button title="' + out('Cancel') + '" id="btnViewHtmlCancel" tabindex="-1" style="height:38px" class="classic-secondary"> ' + out('Cancel') + ' </button>' + '<button title="' + out('Ok') + '" id="btnViewHtmlOk" tabindex="-1" style="height:38px" class="classic-primary"> ' + out('Ok') + ' </button>' + '</div>' + '<div style="height:100%;box-sizing:border-box;border-top:#f3f3f3 50px solid;position:relative">' + '<textarea id="inpViewHtml" tabindex="-1" style="width:100%;height:100%;resize: none;"></textarea>' + '</div>' + '</div>' + '</div>' + '<div id="divSidebarTypography" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div class="scroll-darker">' + '<div style="padding: 15px 0 0 20px">' + '<div class="is-sidebar-title" style="margin-bottom:12px;">' + out('Typography Styles') + '</div>' + '<div>' + out('Apply to') + ':</div>' + '<div style="display:flex;justify-content:space-between;align-items: center;">' + '<div class="typo-target-default" style="display:flex">' + '<label><input type="radio" tabindex="0" name="typoTarget" value="page"> <span>' + out('Page') + '</span></label>' + '<label><input type="radio" tabindex="0" name="typoTarget" value="section" checked> <span>' + out('Section') + '</span></label>' + '</div>' + '<div class="typo-target-box" style="display: flex;">' + '<span>' + out('Active Box') + '</span>' + '</div>' + '<button title="' + out('Clear') + '" tabindex="0" id="btnTypoClear"><svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg></button>' + '</div>' + '</div>' + '<div id="divSelector"></div>' + '<div id="divStyles"></div>' + '</div>' + '</div>';
     } else {
       html = '<div id="divSections" style="display:none"></div>' + '<div class="is-modal addsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 900px;">' + '<div id="divSectionList" class="is-section-list"></div>' + '</div>' + '</div>';
     }
@@ -918,6 +921,10 @@ class SideBar {
       this.builder.editor.rte.zoomEnd(this.pageZoomSlider);
     };
 
+    this.pageZoomSlider.addEventListener('mouseup', () => {
+      // in case of no value change
+      this.builder.editor.rte.zoomEnd(this.pageZoomSlider);
+    });
     const btnEditTimeline = this.pageQuickSettings.querySelector('.cmd-timeline-edit');
     if (btnEditTimeline) btnEditTimeline.addEventListener('click', () => {
       this.builder.timeline.edit();
@@ -8828,8 +8835,39 @@ class Text {
     });
   }
 
-  setFlexGrow(isGrow) {
+  elementChildren(elm) {
+    const childNodes = elm.childNodes;
+    let children = [];
+    let i = childNodes.length;
+
+    while (i--) {
+      if (childNodes[i].nodeType === 1) {
+        children.unshift(childNodes[i]);
+      }
+    }
+
+    return children;
+  }
+
+  getElmBlock() {
+    // Get element block (eg. h1, h2, p, div,  ..) that is under the column (column's child)
+    let activeColumn = this.builder.controlpanel.activeColumn;
     let elm = this.getElm();
+    let children = this.elementChildren(activeColumn);
+    let elmBlock;
+    children.forEach(item => {
+      if (item.contains(elm)) {
+        elmBlock = item;
+      }
+    });
+    return elmBlock;
+  }
+
+  setFlexGrow(isGrow) {
+    // let elm = this.getElm();
+    // if(!elm) return; 
+    // elm = this.getParentBlock(elm);
+    let elm = this.getElmBlock();
     if (!elm) return;
 
     if (isGrow) {
@@ -11009,7 +11047,12 @@ class PanelText {
 
   getState() {
     let activeElement = this.builder.controlpanel.activeElement;
-    if (!activeElement) return; // Coloris
+    if (!activeElement) return;
+
+    if (activeElement.classList.contains('cell-active')) {
+      activeElement = this.text.getElm();
+      if (!activeElement) return;
+    } // Coloris
 
     /*
     Coloris.close(true);
@@ -11019,6 +11062,7 @@ class PanelText {
     btnColor.dispatchEvent(new Event('input', { bubbles: true }));
     */
 
+
     const btnColorPick = this.panel.querySelector('.btn-color');
     let currentColor = this.text.getStyle(activeElement, 'color');
     btnColorPick.style.backgroundColor = currentColor;
@@ -20894,6 +20938,15 @@ class ControlPanel {
     Array.prototype.forEach.call(elms, elm => {
       elm.setAttribute('data-title', elm.getAttribute('title'));
       this.builder.editor.tooltip.set(elm);
+    }); // Enable tooltip for buttons inside div.data-tooltip
+
+    const divs = document.querySelectorAll('[data-tooltip]');
+    divs.forEach(div => {
+      let elms = div.querySelectorAll('button[title]');
+      elms.forEach(elm => {
+        elm.setAttribute('data-title', elm.getAttribute('title'));
+        this.builder.editor.tooltip.set(elm);
+      });
     });
   }
 
@@ -101549,14 +101602,14 @@ class AnimateScroll {
 
                             <div style="display:flex;justify-content: flex-end;margin-top: 15px;margin-right: 20px;">
                                 <button title="${out('Clear All')}" class="cmd-clear-simplescroll" style="padding: 0 20px;">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                     <span style="margin-left:7px">${out('Clear All')}</span>
                                 </button>
                             </div>
 
                             <div style="display:flex;justify-content: flex-end;margin-top: 5px;margin-right: 20px;">
                                 <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="padding: 0 20px;">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                     <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
                                 </button>
                             </div>
@@ -101654,7 +101707,7 @@ class AnimateScroll {
                                 <button title="1.3s" class="cmd-basic-delay" data-value="delay-1300ms" style="width:55px">1.3s</button>
                                 <button title="1.4s" class="cmd-basic-delay" data-value="delay-1400ms" style="width:55px">1.4s</button>
                                 <button title="${out('Clear')}" class="cmd-clear-delay" style="width:45px;background: none;box-shadow:none;">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                             </div>
 
@@ -101664,14 +101717,14 @@ class AnimateScroll {
 
                             <div style="display:flex;justify-content: flex-end;margin-top: 15px;margin-right: 20px;">
                                 <button title="${out('Clear All')}" class="cmd-clear-basicanim" style="padding: 0 20px;">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                     <span style="margin-left:7px">${out('Clear All')}</span>
                                 </button>
                             </div>
 
                             <div style="display:flex;justify-content: flex-end;margin-top: 5px;margin-right: 20px;">
                                 <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="padding: 0 20px;">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                     <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
                                 </button>
                             </div>
@@ -101699,7 +101752,7 @@ class AnimateScroll {
                                     <input class="inp-slide-left" type="text" />
                                 </span> 
                                 <button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                             </div>
                             <div class="flex-wrap">
@@ -101716,7 +101769,7 @@ class AnimateScroll {
                                     <input class="inp-slide-right" type="text" />
                                 </span> 
                                 <button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                             </div>
                             <div class="flex-wrap">
@@ -101734,7 +101787,7 @@ class AnimateScroll {
                                     <input class="inp-slide-up" type="text" />
                                 </span> 
                                 <button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                             </div>
                             <div class="flex-wrap">
@@ -101751,7 +101804,7 @@ class AnimateScroll {
                                     <input class="inp-slide-down" type="text" />
                                 </span> 
                                 <button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                             </div>
                             <div class="flex-wrap">
@@ -101769,7 +101822,7 @@ class AnimateScroll {
                                     <input class="inp-scale" type="text" />
                                 </span> 
                                 <button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                                 <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrows-diagonal"></use></svg>-->
                             </div>
@@ -101788,7 +101841,7 @@ class AnimateScroll {
                                     <input class="inp-rotate-clockwise" type="text" />
                                 </span> 
                                 <button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                                 <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
                             </div>
@@ -101805,7 +101858,7 @@ class AnimateScroll {
                                     <input class="inp-rotate-counter" type="text" />
                                 </span> 
                                 <button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                                 <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
                             </div>
@@ -101825,14 +101878,14 @@ class AnimateScroll {
 
                             <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
                                 <button title="${out('Clear All')}" class="cmd-clear-scrollanim" style="padding: 0 20px;">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                     <span style="margin-left:7px">${out('Clear All')}</span>
                                 </button>
                             </div>
 
                             <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
                                 <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="padding: 0 20px;">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                     <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
                                 </button>
                             </div>
@@ -101847,7 +101900,7 @@ class AnimateScroll {
                                     <span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" type="text" />
                                 </span> 
                                 <button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                             </div>
                             <div class="flex-wrap">
@@ -101864,7 +101917,7 @@ class AnimateScroll {
                                     <input class="inp-slide-right" type="text" />
                                 </span> 
                                 <button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                             </div>
                             <div class="flex-wrap">
@@ -101882,7 +101935,7 @@ class AnimateScroll {
                                     <input class="inp-slide-up" type="text" />
                                 </span> 
                                 <button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                             </div>
                             <div class="flex-wrap">
@@ -101899,7 +101952,7 @@ class AnimateScroll {
                                     <input class="inp-slide-down" type="text" />
                                 </span> 
                                 <button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                             </div>
                             <div class="flex-wrap">
@@ -101917,7 +101970,7 @@ class AnimateScroll {
                                     <input class="inp-scale" type="text" />
                                 </span> 
                                 <button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                             </div>
                             <div class="flex-nowrap">
@@ -101935,7 +101988,7 @@ class AnimateScroll {
                                     <input class="inp-rotate-clockwise" type="text" />
                                 </span> 
                                 <button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                                 <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
                             </div>
@@ -101952,7 +102005,7 @@ class AnimateScroll {
                                     <input class="inp-rotate-counter" type="text" />
                                 </span> 
                                 <button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>
                                 <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
                             </div>
@@ -101971,14 +102024,14 @@ class AnimateScroll {
 
                             <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
                                 <button title="${out('Clear All')}" class="cmd-clear-scrollanim" style="padding: 0 20px;">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                     <span style="margin-left:7px">${out('Clear All')}</span>
                                 </button>
                             </div>
 
                             <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
                                 <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="padding: 0 20px;">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                     <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
                                 </button>
                             </div>
@@ -102038,7 +102091,7 @@ class AnimateScroll {
                     </label>
 
                     <button title="${out('Clear')}" class="cmd-clear-anim-wizard" style="width:100px">
-                        <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                        <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                         <span style="margin-left:7px">${out('Clear')}</span>
                     </button>
                 </div>
@@ -105715,7 +105768,7 @@ class Timeline {
                             <td style="text-align:center"></td>
                             <td style="text-align:center;padding:0">
                                 <!--<button title="${out('Clear All')}" class="cmd-clear-timeline" style="margin-left:5px;height:23px;flex: none;width: auto;padding: 0 0 0 8px !important;box-shadow: none !important;background: transparent !important;">
-                                    <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                    <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 </button>-->
                             </td>
                         </tr>  
@@ -106222,7 +106275,7 @@ class Timeline {
                                     <button type="button" title="${out('More')}" class="cmd-timeline-more" style="width:40px;height:34px;"><svg class="is-icon-flex"><use xlink:href="#icon-settings"></use></svg></button>
                                 
                                     <!--<button title="${out('Clear All')}" class="cmd-clear-timeline" style="width:40px;height:34px;">
-                                        <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                        <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                     </button>-->
                                 </div>
                             </div>
@@ -106264,7 +106317,7 @@ class Timeline {
                         </div>
                         <div class="flex-wrap" style="margin-top:8px;">
                             <button title="${out('Clear All')}" class="cmd-clear-timeline" style="width:30px;height:23px;flex: none;box-shadow: none !important;">
-                                <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                             </button>
                             <button title="${out('More')}" type="button" class="cmd-clear-more" style="width:30px;height:23px;">
                                 <svg class="is-icon-flex" style="width: 14px;height: 14px;"><use xlink:href="#ion-more"></use></svg>
@@ -106273,7 +106326,7 @@ class Timeline {
 
                         <div class="clear-more flex-wrap is-pop">
                             <button title="${out('Clear All Animations in Section')}" class="cmd-clear-timeline-all" style="flex:none;width:auto;padding:0 20px !important;box-shadow:none !important;">
-                                <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                 <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
                             </button>
                         </div>
@@ -106309,7 +106362,7 @@ class Timeline {
                                     </div>
                                     <!--
                                     <button title="${out('Clear All')}" class="cmd-clear-timeline" style="margin-left:5px;height:34px;flex: none;width: auto;padding: 0 0 0 8px !important;box-shadow: none !important;background: transparent !important;">
-                                        <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
+                                        <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
                                     </button>
                                     -->
                                 </div>
@@ -128386,6 +128439,14 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
       localStorage.removeItem('_screenmode');
     }
 
+    if (this.controlPanel) {
+      // The new control panel works best with zoom=1, no live preview and animation
+      localStorage.removeItem('_zoom'); // Reset zoom
+
+      localStorage.removeItem('_livepreview');
+      localStorage.removeItem('_disableanimation');
+    }
+
     this.templateJSON = [{
       url: this.settings.designUrl1,
       path: this.settings.designPath,
@@ -128857,8 +128918,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
         wrapper.style.transition = 'none';
       },
       onZoom: scale => {
-        console.log('onZoom'); // Zoom Adjustment
-
+        // Zoom Adjustment
         const x = 300 * (1 - scale) / 0.5;
         this.wrapperEl.style.marginTop = `${x}px`;
         const wrapper = this.wrapperEl;
@@ -128874,10 +128934,8 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
         tools.forEach(elm => {
           elm.setAttribute('data-boxinfo-active', '');
         });
-        this.ss();
       },
       onZoomEnd: () => {
-        console.log('onZoomEnd');
         const wrapper = this.wrapperEl;
         const section = wrapper.querySelector('.is-section');
         if (!section) return; // empty content
@@ -130146,7 +130204,15 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
         }
         if (elmTool) elmTool.style.display = '';
         if (divImageTool) divImageTool.style.display = '';
-        if (divImageResizer) divImageResizer.style.display = '';
+
+        if (divImageResizer) {
+          divImageResizer.style.display = ''; // moveable
+
+          divImageResizer.style.top = '-10px';
+          divImageResizer.style.left = '-10px';
+          divImageResizer.style.width = '1px';
+          divImageResizer.style.height = '1px';
+        }
       };
 
       if (hideOnScroll) {
@@ -130779,7 +130845,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
         arrSections.push(newSection);
       }
     } else {
-      if (this.activeSection) {
+      if (this.activeSection && this.wrapperEl.contains(this.activeSection)) {
         let activeSection = this.activeSection;
 
         if (dom.hasClass(activeSection, 'is-static')) {
@@ -131574,10 +131640,6 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
     }
   }
 
-  clear() {
-    this.loadHtml('');
-  }
-
   loadHtml(html) {
     // Reset
     this.activeBox = null;
@@ -131837,6 +131899,14 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
     this.export(options, true);
   }
 
+  clear() {
+    this.editor.util.confirm(out('Are you sure you want to clear the page content?'), ok => {
+      if (ok) {
+        this.loadHtml('');
+      }
+    }, true, out('Clear'), true); //true => force open
+  }
+
   export(options = {}, shortenOutput = false) {
     let pageTemplate = this.pageTemplate;
     let output = ''; // [%CONTENT%]