@innovastudio/contentbox 1.6.25 → 1.6.26

package/public/contentbox/contentbox.esm.js

@@ -10902,8 +10902,9 @@ class PanelText {
       colorpicker.open(color => {
         this.text.setTextColor(color);
         btnColor.style.backgroundColor = color; // preview
+        // this.builder.onChange();
 
-        this.builder.onChange();
+        this.builder.editor.onChange();
       }, currentColor);
     });
     const btnBackColor = panel.querySelector('.btn-backcolor');
@@ -10914,8 +10915,9 @@ class PanelText {
       colorpicker.open(color => {
         this.text.setTextBg(color);
         btnBackColor.style.backgroundColor = color; // preview
+        // this.builder.onChange();
 
-        this.builder.onChange();
+        this.builder.editor.onChange();
       }, currentColor);
     });
     const btnFormats = panel.querySelectorAll('[data-format]');
@@ -10924,8 +10926,9 @@ class PanelText {
         this.saveForUndo();
         const command = btn.getAttribute('data-format');
         this.text.formatText(command);
-        this.getState();
-        this.builder.onChange();
+        this.getState(); // this.builder.onChange();
+
+        this.builder.editor.onChange();
       });
     });
     const btnAligns = panel.querySelectorAll('[data-align]');
@@ -10934,8 +10937,9 @@ class PanelText {
         this.saveForUndo();
         const command = btn.getAttribute('data-align');
         this.text.setTextAlign(command);
-        this.getState();
-        this.builder.onChange();
+        this.getState(); // this.builder.onChange();
+
+        this.builder.editor.onChange();
       });
     });
     const btnActions = panel.querySelectorAll('[data-action]');
@@ -10945,8 +10949,9 @@ class PanelText {
         const command = btn.getAttribute('data-action');
         this.text.setAction(command, () => {
           // on finish
-          this.getState();
-          this.builder.onChange();
+          this.getState(); // this.builder.onChange();
+
+          this.builder.editor.onChange();
         });
       });
     });
@@ -10955,8 +10960,9 @@ class PanelText {
       btn.addEventListener('click', () => {
         this.saveForUndo();
         const tag = btn.getAttribute('data-tag');
-        this.text.pasteHtmlAtCaret(tag, true);
-        this.builder.onChange();
+        this.text.pasteHtmlAtCaret(tag, true); // this.builder.onChange();
+
+        this.builder.editor.onChange();
       });
     });
     if (builder.customTags.length === 0) panel.querySelector('.customtags').style.display = 'none';
@@ -10977,8 +10983,9 @@ class PanelText {
             this.text.applyClassFontSize(container, num);
           }
         });
-        this.getState();
-        this.builder.onChange();
+        this.getState(); // this.builder.onChange();
+
+        this.builder.editor.onChange();
       });
     });
     const btnWeight = panel.querySelectorAll('.group.fontweight button');
@@ -10991,8 +10998,9 @@ class PanelText {
             this.text.applyClassFontWeight(container, num);
           }
         });
-        this.getState();
-        this.builder.onChange();
+        this.getState(); // this.builder.onChange();
+
+        this.builder.editor.onChange();
       });
     });
     const btnLineSpacing = panel.querySelectorAll('.group.linespacing button');
@@ -11001,8 +11009,9 @@ class PanelText {
         this.saveForUndo();
         const num = btn.getAttribute('data-value');
         this.text.setLineHeight(num);
-        this.getState();
-        this.builder.onChange();
+        this.getState(); // this.builder.onChange();
+
+        this.builder.editor.onChange();
       });
     });
     const btnLetterSpacing = panel.querySelectorAll('.group.letterspacing button');
@@ -11011,8 +11020,9 @@ class PanelText {
         this.saveForUndo();
         const num = btn.getAttribute('data-value');
         this.text.setLetterSpacing(num);
-        this.getState();
-        this.builder.onChange();
+        this.getState(); // this.builder.onChange();
+
+        this.builder.editor.onChange();
       });
     });
     let path = this.builder.fontAssetPath;
@@ -11029,8 +11039,9 @@ class PanelText {
         let provider = selected.provider;
         this.saveForUndo();
         this.text.setFont(fontFamily, fontStyle, fontDisplay, provider);
-        this.getState();
-        this.builder.onChange();
+        this.getState(); // this.builder.onChange();
+
+        this.builder.editor.onChange();
       }
     });
     const headingList = [{
@@ -11069,8 +11080,9 @@ class PanelText {
       onChange: value => {
         this.saveForUndo();
         this.text.setParagraph(value);
-        this.getState();
-        this.builder.onChange();
+        this.getState(); // this.builder.onChange();
+
+        this.builder.editor.onChange();
       },
       search: false
     });
@@ -34369,7 +34381,6 @@ 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>
@@ -34383,7 +34394,45 @@ const prepareSvgIcons = builder => {
                 <path d="M12 5l0 14" /><path d="M18 11l-6 -6" /><path d="M6 11l6 -6" />
             </symbol>
 
-            </defs>
+            <symbol id="icon-group" 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="M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2v-2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2" />
+            </symbol>
+            <symbol id="icon-ungroup" 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="M8 4m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" /><path d="M4 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" />
+            </symbol>
+
+            <symbol id="icon-group2" 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 6v-1a1 1 0 0 1 1 -1h1m5 0h2m5 0h1a1 1 0 0 1 1 1v1m0 5v2m0 5v1a1 1 0 0 1 -1 1h-1m-5 0h-2m-5 0h-1a1 1 0 0 1 -1 -1v-1m0 -5v-2" />
+            </symbol>
+            <symbol id="icon-group3" 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="M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2v-2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2" /><path d="M10 8l-2 0l0 2" /><path d="M8 14l0 2l2 0" /><path d="M14 8l2 0l0 2" /><path d="M16 14l0 2l-2 0" />
+            </symbol>
+            <symbol id="icon-group4" 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="M7 19a2 2 0 0 1 -2 -2" /><path d="M5 13v-2" /><path d="M5 7a2 2 0 0 1 2 -2" /><path d="M11 5h2" /><path d="M17 5a2 2 0 0 1 2 2" /><path d="M19 11v2" /><path d="M19 17v4" /><path d="M21 19h-4" /><path d="M13 19h-2" />
+            </symbol>
+            <symbol id="icon-ungroup2" 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 6c0 -.556 .227 -1.059 .593 -1.421" /><path d="M9 4h1.5" /><path d="M13.5 4h1.5" /><path d="M18 4a2 2 0 0 1 2 2" /><path d="M20 9v1.5" /><path d="M20 13.5v1.5" /><path d="M19.402 19.426a1.993 1.993 0 0 1 -1.402 .574" /><path d="M15 20h-1.5" /><path d="M10.5 20h-1.5" /><path d="M6 20a2 2 0 0 1 -2 -2" /><path d="M4 15v-1.5" /><path d="M4 10.5v-1.5" /><path d="M3 3l18 18" />
+            </symbol>
+            <symbol id="icon-ungroup3" 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="M15 16.572v2.42a2.01 2.01 0 0 1 -2.009 2.008h-7.981a2.01 2.01 0 0 1 -2.01 -2.009v-7.981a2.01 2.01 0 0 1 2.009 -2.01h2.954" /><path d="M9.167 4.511a2.04 2.04 0 0 1 2.496 -1.441l7.826 2.097a2.04 2.04 0 0 1 1.441 2.496l-2.097 7.826a2.04 2.04 0 0 1 -2.496 1.441l-7.827 -2.097a2.04 2.04 0 0 1 -1.441 -2.496l2.098 -7.827z" />
+            </symbol>
+
+            <symbol id="icon-duplicate" 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="M15 16.572v2.42a2.01 2.01 0 0 1 -2.009 2.008h-7.981a2.01 2.01 0 0 1 -2.01 -2.009v-7.981a2.01 2.01 0 0 1 2.009 -2.01h2.954" /><path d="M9.167 4.511a2.04 2.04 0 0 1 2.496 -1.441l7.826 2.097a2.04 2.04 0 0 1 1.441 2.496l-2.097 7.826a2.04 2.04 0 0 1 -2.496 1.441l-7.827 -2.097a2.04 2.04 0 0 1 -1.441 -2.496l2.098 -7.827z" />
+            </symbol>
+            <symbol id="icon-duplicate2" 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="M7 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" /><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
+            </symbol>
+
+            <symbol id="icon-trash" 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>
+                <path d="M4 7l16 0"></path>
+                <path d="M10 11l0 6"></path>
+                <path d="M14 11l0 6"></path>
+                <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
+                <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
+            </symbol>
+
         </svg>`;
   builder.dom.appendHtml(builder.builderStuff, html);
 };
@@ -40696,6 +40745,21 @@ const renderSnippetPanel = (builder, snippetOpen) => {
       // }
     },
 
+    onSort: evt => {
+      if (!builder.canvas) return;
+      let snippetX = evt.originalEvent.clientX;
+      let snippetY = evt.originalEvent.clientY;
+      const block = builder.doc.querySelector('[data-new-dummy]');
+      if (block) {
+        const docContainer = block.parentNode;
+        block.offsetWidth / 2;
+        let x = (snippetX - block.offsetWidth / 2) / docContainer.offsetWidth * 100;
+        let y = (snippetY - block.offsetHeight / 2) / docContainer.offsetHeight * 100;
+        block.style.top = y + '%';
+        block.style.left = x + '%';
+        block.removeAttribute('data-new-dummy');
+      }
+    },
     onStart: () => {
       // Remove .builder-active during dragging (because this class makes rows have border-right/left 120px)
       activeBuilderArea = null;
@@ -69399,13 +69463,15 @@ class Image$1 {
           const movControlBox = document.querySelector('.moveable-control-box');
           if (movControlBox) movControlBox.style.display = 'none';
         }
-        let prog = false;
-        if (e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0) ; else {
-          // console.log('Programmatically');
-          prog = true;
-        }
-        if (prog) {
-          this.hideImageTool();
+        if (this.builder.canvas) ; else {
+          let prog = false;
+          if (e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0) ; else {
+            // console.log('Programmatically');
+            prog = true;
+          }
+          if (prog) {
+            this.hideImageTool();
+          }
         }
 
         // NOTE:
@@ -86654,7 +86720,7 @@ class Rte {
     let inpZoomSlider;
     if (!rteTool) {
       if (builder.plugins.length > 0) {
-        let allButtons = ['|', 'addsnippet', 'bold', 'italic', 'underline', 'formatting', 'color', 'removeformat', 'align', 'textsettings', 'createlink', 'tags', 'undo', 'redo', 'zoom', 'livepreview', 'icon', 'image', 'list', 'font', 'formatpara', 'gridtool', 'html', 'preferences', 'more', 'left', 'center', 'right', 'full'];
+        let allButtons = ['|', 'addsnippet', 'bold', 'italic', 'underline', 'formatting', 'color', 'removeformat', 'align', 'textsettings', 'createlink', 'tags', 'undo', 'redo', 'zoom', 'livepreview', 'icon', 'image', 'list', 'font', 'formatpara', 'gridtool', 'html', 'preferences', 'more', 'left', 'center', 'right', 'full', 'group', 'ungroup', 'duplicate', 'addblock', 'front', 'backward', 'moveup', 'movedown', 'delete'];
         const filterButtons = myArray => {
           let newArray = myArray;
           myArray.forEach(item => {
@@ -86741,7 +86807,7 @@ class Rte {
       let html_elementrte = '';
       for (j = 0; j < builder.opts.elementButtons.length; j++) {
         btn = builder.opts.elementButtons[j].toLowerCase();
-        if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_elementrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'more' && html_elementrtemore !== '') html_elementrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'zoom') html_elementrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
+        if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'group') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Group')}" class="rte-group"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-group"></use></svg></button>`;else if (btn === 'ungroup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Ungroup')}" class="rte-ungroup"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-ungroup"></use></svg></button>`;else if (btn === 'duplicate') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Duplicate')}" class="rte-duplicate"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-duplicate"></use></svg></button>`;else if (btn === 'front') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Bring to Front')}" class="rte-front"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-forward"></use></svg></button>`;else if (btn === 'backward') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Send to Back')}" class="rte-backward"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-backward"></use></svg></button>`;else if (btn === 'moveup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Up')}" class="rte-moveup"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-up"></use></svg></button>`;else if (btn === 'movedown') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Down')}" class="rte-movedown"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-down"></use></svg></button>`;else if (btn === 'delete') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Delete')}" class="rte-delete"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-trash"></use></svg></button>`;else if (btn === 'undo') html_elementrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'more' && html_elementrtemore !== '') html_elementrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'zoom') html_elementrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
           html_elementrte += '<div class="rte-separator"></div>';
         } else {
           html_elementrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
@@ -89049,6 +89115,71 @@ class Rte {
       });
     });
 
+    // freeform
+
+    let btnGroup = builderStuff.querySelectorAll('button.rte-group');
+    btnGroup.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.group();
+        builderStuff.querySelectorAll('button.rte-group').forEach(elm => elm.style.display = 'none');
+        builderStuff.querySelectorAll('button.rte-ungroup').forEach(elm => elm.style.display = '');
+      });
+    });
+    let btnUnGroup = builderStuff.querySelectorAll('button.rte-ungroup');
+    btnUnGroup.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.unGroup();
+        builderStuff.querySelectorAll('button.rte-group').forEach(elm => elm.style.display = '');
+        builderStuff.querySelectorAll('button.rte-ungroup').forEach(elm => elm.style.display = 'none');
+      });
+    });
+    let btnDelete = builderStuff.querySelectorAll('button.rte-delete');
+    btnDelete.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.delete();
+      });
+    });
+    let btnFront = builderStuff.querySelectorAll('button.rte-front');
+    btnFront.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
+        if (!activeBlock) return;
+        this.builder.forward(activeBlock);
+      });
+    });
+    let btnBackward = builderStuff.querySelectorAll('button.rte-backward');
+    btnBackward.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
+        if (!activeBlock) return;
+        this.builder.backward(activeBlock);
+      });
+    });
+    let btnMoveUp = builderStuff.querySelectorAll('button.rte-moveup');
+    btnMoveUp.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let activeBlock = this.builder.doc.querySelector('.is-block.active');
+        if (!activeBlock) return;
+        this.builder.moveUp(activeBlock);
+      });
+    });
+    let btnMoveDown = builderStuff.querySelectorAll('button.rte-movedown');
+    btnMoveDown.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let activeBlock = this.builder.doc.querySelector('.is-block.active');
+        if (!activeBlock) return;
+        this.builder.moveDown(activeBlock);
+      });
+    });
+    let btnDuplicate = builderStuff.querySelectorAll('button.rte-duplicate');
+    btnDuplicate.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
+        if (!activeBlock) return;
+        this.builder.duplicate(activeBlock);
+      });
+    });
+
     // -----------------------------
 
     // Click anywhere will hide Column tool
@@ -89981,6 +90112,40 @@ class Rte {
       btn.style.display = 'none';
     });
   }
+  hideBlockButtons() {
+    let elms = this.elementRteTool.querySelectorAll('.rte-group');
+    Array.prototype.forEach.call(elms, elm => {
+      elm.style.display = 'none';
+    });
+    elms = this.elementRteTool.querySelectorAll('.rte-ungroup');
+    Array.prototype.forEach.call(elms, elm => {
+      elm.style.display = 'none';
+    });
+    elms = this.elementRteTool.querySelectorAll('.rte-duplicate');
+    Array.prototype.forEach.call(elms, elm => {
+      elm.style.display = 'none';
+    });
+    elms = this.elementRteTool.querySelectorAll('.rte-front');
+    Array.prototype.forEach.call(elms, elm => {
+      elm.style.display = 'none';
+    });
+    elms = this.elementRteTool.querySelectorAll('.rte-backward');
+    Array.prototype.forEach.call(elms, elm => {
+      elm.style.display = 'none';
+    });
+    elms = this.elementRteTool.querySelectorAll('.rte-moveup');
+    Array.prototype.forEach.call(elms, elm => {
+      elm.style.display = 'none';
+    });
+    elms = this.elementRteTool.querySelectorAll('.rte-movedown');
+    Array.prototype.forEach.call(elms, elm => {
+      elm.style.display = 'none';
+    });
+    elms = this.elementRteTool.querySelectorAll('.rte-delete');
+    Array.prototype.forEach.call(elms, elm => {
+      elm.style.display = 'none';
+    });
+  }
   showAlignButtons() {
     let separators = this.elementRteTool.querySelectorAll('.rte-separator');
     Array.prototype.forEach.call(separators, separator => {
@@ -90030,6 +90195,7 @@ class Rte {
         subblock = true;
       }
     }
+    if (this.builder.canvas) this.hideBlockButtons();
     this.rteTool.querySelector('.rte-for-text').style.display = 'flex';
     this.rteTool.querySelector('.rte-for-icon').style.display = 'none';
     this.rteMoreOptions.querySelector('.rte-for-text').style.display = 'flex';
@@ -99064,6 +99230,7 @@ class Draggable {
     this.selector = options && options.selector || '.is-block';
     this.doc = options && options.doc || document;
     this.win = options && options.win || window;
+    this.controlSelector = options && options.controlSelector || null;
     this.onDelete = options && options.onDelete || null;
     this.onBeforeChange = options && options.onBeforeChange || null;
     this.onChange = options && options.onChange || null;
@@ -99333,7 +99500,7 @@ class Draggable {
         this.doc.querySelectorAll('.block-active').forEach(elm => elm.classList.remove('block-active'));
       }
     } else {
-      if (event.target.closest('.keep-selection')) return;
+      if (event.target.closest('.keep-selection') || this.controlSelector && event.target.closest(this.controlSelector)) return;
 
       // // Make empty height set with value
       // // if(this.clickedBlock) this.common.updateHeight(this.clickedBlock);
@@ -99465,7 +99632,7 @@ class Editable {
     this.doc.addEventListener('touchstart', this.handleMouseClick, {
       passive: false
     });
-    if (this.onEditStart) this.onEditStart(currentTarget);
+    if (this.onEditStart) this.onEditStart(event, currentTarget);
   }
   handleTouchStart(event) {
     // Handle Double Tab
@@ -99764,6 +99931,7 @@ class EditableBlocks {
       disableOnMobile: this.disableOnMobile,
       doc: this.doc,
       win: this.win,
+      controlSelector: this.controlSelector,
       onDelete: element => {
         if (this.rotatable) this.rotatable.destroy(element);
         this.resizable.destroy(element);
@@ -99820,10 +99988,10 @@ class EditableBlocks {
       doc: this.doc,
       win: this.win,
       onContentClick: this.onContentClick,
-      onEditStart: block => {
+      onEditStart: (event, block) => {
         if (block.classList.contains('clone')) {
           const clonedTarget = this.doc.querySelector(this.selector + '.cloned');
-          this.onEditStart(clonedTarget);
+          this.onEditStart(event, clonedTarget);
           this.selectClear();
 
           // Disable drag during editing
@@ -99831,7 +99999,7 @@ class EditableBlocks {
           this.draggable.disableDrag(clonedTarget);
           return;
         }
-        this.onEditStart(block);
+        this.onEditStart(event, block);
 
         // Disable drag during editing
         if (!this.draggable) return;
@@ -101076,13 +101244,21 @@ class ContentBuilder {
     let oldOnUndo = this.opts.onUndo;
     this.opts.onUndo = () => {
       let ret = oldOnUndo.apply(this, arguments);
-      if (this.eb) this.eb.refresh();
+      if (this.eb) {
+        this.eb.refresh();
+        this.rte.hideBlockButtons();
+        this.rte.positionToolbar();
+      }
       return ret;
     };
     let oldOnRedo = this.opts.onRedo;
     this.opts.onRedo = () => {
       let ret = oldOnRedo.apply(this, arguments);
-      if (this.eb) this.eb.refresh();
+      if (this.eb) {
+        this.eb.refresh();
+        this.rte.hideBlockButtons();
+        this.rte.positionToolbar();
+      }
       return ret;
     };
     this.elmTool = new ElementTool(this); // Render Element Tool
@@ -101157,7 +101333,7 @@ class ContentBuilder {
       doc: this.doc,
       win: this.win,
       selector: '.is-block',
-      controlSelector: '.is-tool,.is-pop,.is-modal,#divImageResizer,.is-rte-tool,is-elementrte-tool,.is-rte-pop,.keep-selection',
+      controlSelector: '.is-tool,.is-pop,.is-modal,#divImageResizer,.is-rte-tool,.is-elementrte-tool,.is-rte-pop,.keep-selection',
       parentSelector: '.box-canvas',
       rotate: true,
       // disableOnMobile: 760,
@@ -101167,12 +101343,40 @@ class ContentBuilder {
       onChange: () => {
         this.opts.onChange();
       },
-      onEditStart: block => {
+      onEditStart: (event, block) => {
         block.classList.add('editable');
-        const cols = block.querySelectorAll('[data-click="true"]'); // or [contentEditable="true"]
-        if (cols.length > 0) {
-          let col = cols[cols.length - 1];
-          if (col.lastElementChild) col.lastElementChild.click();
+
+        // get element to activate
+        let x = event.clientX;
+        let y = event.clientY;
+        let activeBlock = this.doc.querySelector('.is-block.cloned');
+        if (!activeBlock) return;
+        const container = activeBlock.querySelector('.is-container');
+        if (!container) return;
+        const cols = this.getAllColumns(container);
+        let clickedElm;
+        let clickedCol;
+        cols.forEach(col => {
+          let elms = col.children;
+          for (let i = 0; i < elms.length; i++) {
+            let rect = elms[i].getBoundingClientRect();
+            if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+              clickedElm = elms[i];
+            }
+          }
+          let rect = col.getBoundingClientRect();
+          if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+            clickedCol = col;
+          }
+        });
+        if (clickedElm) {
+          const tagName = clickedElm.tagName.toLowerCase();
+          if (tagName !== 'img') this.eb.placeCursorAtEnd(clickedElm);
+          setTimeout(() => {
+            clickedElm.click();
+          }, 1); // give time for the placeCursorAtEnd
+        } else if (clickedCol) {
+          clickedCol.click();
         }
       },
       onEditEnd: block => {
@@ -101209,10 +101413,108 @@ class ContentBuilder {
         const builder = block.querySelector(this.container);
         this.applyBehaviorOn(builder);
       },
-      onMultipleSelect: this.onMultipleSelect,
-      onDelete: this.onDelete,
-      onSelectBlock: this.onSelectBlock,
-      onUnselectBlock: this.onUnselectBlock
+      onMultipleSelect: () => {
+        if (this.onMultipleSelect) this.onMultipleSelect();
+        setTimeout(() => {
+          this.rte.rteTool.style.display = 'none';
+          this.rte.elementRteTool.style.display = 'flex';
+          this.rte.hideAlignButtons();
+          this.rte.hideBlockButtons();
+
+          // group/ungroup
+          let elms = this.rte.elementRteTool.querySelectorAll('.rte-group');
+          Array.prototype.forEach.call(elms, elm => {
+            elm.style.display = '';
+          });
+          this.rte.positionToolbar();
+        }, 10);
+      },
+      onDelete: () => {
+        if (this.onDelete) this.onDelete();
+        this.rte.hideBlockButtons();
+        this.rte.positionToolbar();
+      },
+      onSelectBlock: block => {
+        if (this.onSelectBlock) this.onSelectBlock(block);
+        if (block.classList.contains('editable')) return;
+        if (this.controlPanel) return;
+        this.rte.rteTool.style.display = 'none';
+        this.rte.elementRteTool.style.display = 'flex';
+        this.rte.hideAlignButtons();
+        let elms = this.rte.elementRteTool.querySelectorAll('.rte-duplicate');
+        Array.prototype.forEach.call(elms, elm => {
+          elm.style.display = '';
+        });
+        elms = this.rte.elementRteTool.querySelectorAll('.rte-moveup');
+        Array.prototype.forEach.call(elms, elm => {
+          elm.style.display = '';
+        });
+        elms = this.rte.elementRteTool.querySelectorAll('.rte-movedown');
+        Array.prototype.forEach.call(elms, elm => {
+          elm.style.display = '';
+        });
+        elms = this.rte.elementRteTool.querySelectorAll('.rte-delete');
+        Array.prototype.forEach.call(elms, elm => {
+          elm.style.display = '';
+        });
+        const viewportWidth = this.doc.body.clientWidth;
+        if (viewportWidth <= 768) {
+          elms = this.rte.elementRteTool.querySelectorAll('.rte-moveup');
+          Array.prototype.forEach.call(elms, elm => {
+            elm.style.display = '';
+          });
+          elms = this.rte.elementRteTool.querySelectorAll('.rte-movedown');
+          Array.prototype.forEach.call(elms, elm => {
+            elm.style.display = '';
+          });
+          elms = this.rte.elementRteTool.querySelectorAll('.rte-front');
+          Array.prototype.forEach.call(elms, elm => {
+            elm.style.display = 'none';
+          });
+          elms = this.rte.elementRteTool.querySelectorAll('.rte-backward');
+          Array.prototype.forEach.call(elms, elm => {
+            elm.style.display = 'none';
+          });
+        } else {
+          elms = this.rte.elementRteTool.querySelectorAll('.rte-moveup');
+          Array.prototype.forEach.call(elms, elm => {
+            elm.style.display = 'none';
+          });
+          elms = this.rte.elementRteTool.querySelectorAll('.rte-movedown');
+          Array.prototype.forEach.call(elms, elm => {
+            elm.style.display = 'none';
+          });
+          elms = this.rte.elementRteTool.querySelectorAll('.rte-front');
+          Array.prototype.forEach.call(elms, elm => {
+            elm.style.display = '';
+          });
+          elms = this.rte.elementRteTool.querySelectorAll('.rte-backward');
+          Array.prototype.forEach.call(elms, elm => {
+            elm.style.display = '';
+          });
+        }
+
+        // group/ungroup
+        elms = this.rte.elementRteTool.querySelectorAll('.rte-group');
+        Array.prototype.forEach.call(elms, elm => {
+          elm.style.display = 'none';
+        });
+        if (block.classList.contains('is-group')) {
+          elms = this.rte.elementRteTool.querySelectorAll('.rte-ungroup');
+          Array.prototype.forEach.call(elms, elm => {
+            elm.style.display = '';
+          });
+        } else {
+          elms = this.rte.elementRteTool.querySelectorAll('.rte-ungroup');
+          Array.prototype.forEach.call(elms, elm => {
+            elm.style.display = 'none';
+          });
+        }
+        this.rte.positionToolbar();
+      },
+      onUnselectBlock: () => {
+        if (this.onUnselectBlock) this.onUnselectBlock();
+      }
     });
     if (this.iframe) {
       this.win.addEventListener('scroll', this.doWindowScroll = () => {
@@ -101313,6 +101615,8 @@ class ContentBuilder {
 
             util.clearActiveCell();
             util.clearControls();
+            if (!target.closest('.is-block')) this.rte.hideBlockButtons(); // freeform
+
             if (!this.controlPanel) if (this.toolbarDisplay !== 'auto') {
               this.rte.showDefaultToolbar();
             }
@@ -101422,6 +101726,20 @@ class ContentBuilder {
   static run(opts = {}) {
     return new ContentBuilder(opts);
   }
+  getAllColumns(container) {
+    let arrCells = [];
+    let rows = container.children;
+    for (let i = 0; i < rows.length; i++) {
+      let cols = rows[i].children;
+      for (let j = 0; j < cols.length; j++) {
+        let col = cols[j];
+        if (col.classList.contains('is-row-tool') || col.classList.contains('is-col-tool') || col.classList.contains('is-rowadd-tool') || col.classList.contains('is-row-overlay')) ; else {
+          arrCells.push(col);
+        }
+      }
+    }
+    return arrCells;
+  }
   setZoom() {
     // Complete (On Area + On Control)
 
@@ -102142,6 +102460,47 @@ class ContentBuilder {
     this.eb.backward(target);
     this.opts.onChange();
   }
+  moveUp(target) {
+    let arrBlocks = [];
+    const container = target.parentNode;
+    let elms = container.querySelectorAll('.is-block');
+    elms.forEach(elm => {
+      arrBlocks.push(elm);
+    });
+    let previousBlock; //, nextBlock;
+    for (let i = 0; i < arrBlocks.length; i++) {
+      if (arrBlocks[i] === target) {
+        if (i - 1 >= 0) previousBlock = arrBlocks[i - 1];
+        // if(i+1<arrBlocks.length) nextBlock = arrBlocks[i+1];
+      }
+    }
+
+    if (previousBlock) {
+      this.uo.saveForUndo();
+      container.insertBefore(target, previousBlock);
+      this.opts.onChange();
+    }
+  }
+  moveDown(target) {
+    let arrBlocks = [];
+    const container = target.parentNode;
+    let elms = container.querySelectorAll('.is-block');
+    elms.forEach(elm => {
+      arrBlocks.push(elm);
+    });
+    let nextBlock; //, previousBlock;
+    for (let i = 0; i < arrBlocks.length; i++) {
+      if (arrBlocks[i] === target) {
+        // if(i-1>=0) previousBlock = arrBlocks[i-1];
+        if (i + 1 < arrBlocks.length) nextBlock = arrBlocks[i + 1];
+      }
+    }
+    if (nextBlock) {
+      this.uo.saveForUndo();
+      container.insertBefore(nextBlock, target);
+      this.opts.onChange();
+    }
+  }
   enableShape() {
     if (!this.eb) return;
     this.uo.saveForUndo();
@@ -104758,14 +105117,18 @@ class ContentBuilder {
       }
       boxes.forEach(box => {
         box.insertAdjacentHTML('afterbegin', `
-                <div class="is-block block-dummy" style="top: calc(97.2707% - 149.797px); left: calc(50% - 222px); width: 444px; height: 154px;z-index:-1000;visibility:hidden">
-                </div>`);
+                <div class="is-block block-dummy" style="top: 0%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
+                <div class="is-block block-dummy" style="top: 20%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
+                <div class="is-block block-dummy" style="top: 40%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
+                <div class="is-block block-dummy" style="top: 60%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
+                <div class="is-block block-dummy" style="top: 80%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
+                `);
         const obj = new Sortable(box, {
           scroll: true,
           group: 'shared',
           direction: 'horizontal',
           animation: 150,
-          sort: true,
+          // sort: true, 
           onAdd: evt => {
             let itemEl = evt.item;
             if (itemEl.getAttribute('data-id')) {
@@ -104838,12 +105201,12 @@ class ContentBuilder {
                 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-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: 800px;">
                                     <div class="is-container container-new leading-12 size-17">
                                     [%CONTENT%]
                                     </div>
                                 </div>
-                                `;
+                                `; // data-new-dummy will be used by onSort to apply top/left position (snippetpanel.js)
                 itemEl.outerHTML = blockTemplate.replace('[%CONTENT%]', html);
               } else {
                 // Snippet is wrapped in row/colum (may contain custom code or has [data-html] attribute)
@@ -104876,7 +105239,7 @@ class ContentBuilder {
                 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-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: 800px;">
                                     <div class="is-container container-new leading-12 size-17">
                                     [%CONTENT%]
                                     </div>