@innovastudio/contentbox 1.6.37 → 1.6.39

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.37",
+  "version": "1.6.39",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -52,7 +52,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.17",
+    "@innovastudio/contentbuilder": "^1.5.24",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -43148,6 +43148,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
             obj.destroy();
           }
         });
+        builder.sortableOnCanvas = [];
       }
       if (builder.sortableOnPage) builder.sortableOnPage.destroy();
       let dummies = builder.doc.querySelectorAll('.block-dummy');
@@ -78220,26 +78221,37 @@ class RowTool {
       if (btnCellAdd) dom.addEventListener(btnCellAdd, 'click', () => {
         let cell = util.cellSelected();
         if (!cell) return;
+        const viewportHeight = window.innerHeight;
+        const newPos = util.getElementPosition(btnCellAdd);
+        let top = newPos.top;
+        let left = newPos.left;
         renderQuickAdd(this.builder);
         let quickadd = this.builder.builderStuff.querySelector('.is-pop.quickadd');
         let tabs = quickadd.querySelector('.is-pop-tabs');
         tabs.style.display = 'flex';
-        const newPos = util.getElementPosition(btnCellAdd);
-        let top = newPos.top + window.pageYOffset;
-        let left = newPos.left + window.pageXOffset;
-        if (this.builder.iframe) {
-          left = left + 3;
-        }
         util.showPop(quickadd, false, btnCellAdd);
-        quickadd.style.top = top + 35 + 'px';
-        quickadd.style.left = left + 'px';
-        dom.removeClass(quickadd, 'arrow-bottom');
-        dom.removeClass(quickadd, 'arrow-left');
-        dom.removeClass(quickadd, 'arrow-right');
-        dom.removeClass(quickadd, 'center');
-        dom.removeClass(quickadd, 'right');
-        dom.addClass(quickadd, 'arrow-top');
-        dom.addClass(quickadd, 'left');
+        const h = quickadd.offsetHeight;
+        if (viewportHeight - top > h) {
+          // pop bottom
+          quickadd.style.top = top + window.pageYOffset + 35 + 'px';
+          quickadd.style.left = left + 'px';
+          dom.removeClass(quickadd, 'arrow-bottom');
+          dom.removeClass(quickadd, 'arrow-right');
+          dom.removeClass(quickadd, 'arrow-left');
+          dom.removeClass(quickadd, 'center');
+          dom.addClass(quickadd, 'arrow-top');
+          dom.addClass(quickadd, 'left');
+        } else {
+          // pop top
+          quickadd.style.top = top + window.pageYOffset - h - 8 + 'px';
+          quickadd.style.left = left + 'px';
+          dom.removeClass(quickadd, 'arrow-top');
+          dom.removeClass(quickadd, 'arrow-right');
+          dom.removeClass(quickadd, 'arrow-left');
+          dom.removeClass(quickadd, 'center');
+          dom.addClass(quickadd, 'arrow-bottom');
+          dom.addClass(quickadd, 'left');
+        }
         let val = quickadd.querySelector('.active').getAttribute('data-value');
         if (val === 'left') {
           quickadd.setAttribute('data-mode', 'cell-left');
@@ -78279,21 +78291,38 @@ class RowTool {
       if (btnCellMore) dom.addEventListener(btnCellMore, 'click', () => {
         let cell = util.cellSelected();
         if (!cell) return;
+        const viewportHeight = window.innerHeight;
         const newPos = util.getElementPosition(btnCellMore);
-        let top = newPos.top + window.pageYOffset;
-        let left = newPos.left + window.pageXOffset;
+        let top = newPos.top;
+        let left = newPos.left;
         this.builder.colTool.renderColMore();
         const columnMore = builderStuff.querySelector('.columnmore');
-        util.showPop(columnMore, false, btnCellMore);
-        columnMore.style.top = top + 35 + 'px';
-        columnMore.style.left = left - 7 + 'px';
-        dom.removeClass(columnMore, 'arrow-bottom');
-        dom.removeClass(columnMore, 'arrow-left');
-        dom.removeClass(columnMore, 'arrow-right');
-        dom.removeClass(columnMore, 'center');
-        dom.removeClass(columnMore, 'right');
-        dom.addClass(columnMore, 'arrow-top');
-        dom.addClass(columnMore, 'left');
+        setTimeout(() => {
+          // give delay after renderColMore()
+          util.showPop(columnMore, false, btnCellMore);
+          const h = columnMore.offsetHeight;
+          if (viewportHeight - top > h) {
+            columnMore.style.top = top + window.pageYOffset + 35 + 'px';
+            columnMore.style.left = left - 7 + 'px';
+            dom.removeClass(columnMore, 'arrow-bottom');
+            dom.removeClass(columnMore, 'arrow-right');
+            dom.removeClass(columnMore, 'arrow-left');
+            dom.removeClass(columnMore, 'center');
+            dom.removeClass(columnMore, 'right');
+            dom.addClass(columnMore, 'arrow-top');
+            dom.addClass(columnMore, 'left');
+          } else {
+            columnMore.style.top = top + window.pageYOffset - h - 8 + 'px';
+            columnMore.style.left = left - 7 + 'px';
+            dom.removeClass(columnMore, 'arrow-top');
+            dom.removeClass(columnMore, 'arrow-right');
+            dom.removeClass(columnMore, 'arrow-left');
+            dom.removeClass(columnMore, 'center');
+            dom.removeClass(columnMore, 'right');
+            dom.addClass(columnMore, 'arrow-bottom');
+            dom.addClass(columnMore, 'left');
+          }
+        }, 0);
         const btnCellLocking = columnMore.querySelector('.cell-locking');
         if (cell.hasAttribute('data-noedit')) {
           dom.addClass(btnCellLocking, 'on');
@@ -78447,32 +78476,67 @@ class RowTool {
 
         //Hide Column tool (new!)
         util.hideColumnTool();
+
+        /*
         const newPos = util.getElementPosition(btnMore);
         let top = newPos.top + window.pageYOffset;
         let left = newPos.left + window.pageXOffset;
-        this.renderRowMore();
+         this.renderRowMore();
         const rowMore = this.rowMore;
-
-        // rowMore.style.display = 'flex';
+         // rowMore.style.display = 'flex';
         util.showPop(rowMore, false, btnMore);
         //const w = rowMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
         //const h = rowMore.offsetHeight;
-        rowMore.style.top = top - 8 + 'px';
-        dom.removeClass(rowMore, 'arrow-bottom');
-        dom.removeClass(rowMore, 'arrow-left');
-        dom.removeClass(rowMore, 'arrow-right');
-        dom.removeClass(rowMore, 'center');
-        dom.removeClass(rowMore, 'right');
-        dom.removeClass(rowMore, 'left');
-        if (this.builder.opts.rowTool === 'right') {
-          rowMore.style.left = left - rowMore.offsetWidth - 10 + 'px';
-          dom.addClass(rowMore, 'arrow-right');
-          dom.addClass(rowMore, 'left');
-        } else {
-          rowMore.style.left = left + 35 + 'px';
-          dom.addClass(rowMore, 'arrow-left');
-          dom.addClass(rowMore, 'left');
-        }
+        rowMore.style.top = (top - 8) + 'px';
+         dom.removeClass(rowMore,'arrow-bottom');
+        dom.removeClass(rowMore,'arrow-left');
+        dom.removeClass(rowMore,'arrow-right');
+        dom.removeClass(rowMore,'center');
+        dom.removeClass(rowMore,'right');
+        dom.removeClass(rowMore,'left');
+         if(this.builder.opts.rowTool === 'right') {
+            
+            rowMore.style.left = (left - rowMore.offsetWidth - 10) + 'px';
+             dom.addClass(rowMore,'arrow-right');
+            dom.addClass(rowMore,'left');
+         } else {
+             rowMore.style.left = (left + 35) + 'px';
+             dom.addClass(rowMore,'arrow-left');
+            dom.addClass(rowMore,'left');
+         }
+        */
+
+        const viewportHeight = window.innerHeight;
+        const newPos = util.getElementPosition(btnMore);
+        let top = newPos.top;
+        let left = newPos.left;
+        this.renderRowMore();
+        const rowMore = this.rowMore;
+        setTimeout(() => {
+          // give delay after renderRowMore()
+          util.showPop(rowMore, false, btnMore);
+          const h = rowMore.offsetHeight;
+          dom.removeClass(rowMore, 'arrow-bottom');
+          dom.removeClass(rowMore, 'arrow-left');
+          dom.removeClass(rowMore, 'arrow-right');
+          dom.removeClass(rowMore, 'center');
+          dom.removeClass(rowMore, 'right');
+          dom.removeClass(rowMore, 'left');
+          if (this.builder.opts.rowTool === 'right') {
+            rowMore.style.left = left - rowMore.offsetWidth - 10 + 'px';
+            dom.addClass(rowMore, 'arrow-right');
+            dom.addClass(rowMore, 'left');
+          } else {
+            rowMore.style.left = left + 35 + 'px';
+            dom.addClass(rowMore, 'arrow-left');
+            dom.addClass(rowMore, 'left');
+          }
+          if (viewportHeight - top > h) {
+            rowMore.style.top = top + window.pageYOffset - 8 + 'px';
+          } else {
+            rowMore.style.top = top + window.pageYOffset - h + btnMore.offsetHeight + 'px';
+          }
+        }, 0);
         let btnRowHtml = rowMore.querySelector('.row-html');
         let btnRowDuplicate = rowMore.querySelector('.row-duplicate');
         if (row.querySelector('[data-html]')) {
@@ -91350,9 +91414,25 @@ class Rte {
     // Reset Zoom
     const btnResetZoom = builderStuff.querySelector('.reset-zoom');
     btnResetZoom.addEventListener('click', () => {
+      this.rteZoomSlider.value = 100;
       this.builder.opts.zoom = 1;
       localStorage.setItem('_zoom', 1); // Save
 
+      // setZoomOnControl
+      if (this.builder.isContentBox) {
+        const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
+        this.builder.setZoomOnControl(wrapper);
+      } else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
+        // freeform
+        const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+        this.builder.setZoomOnControl(docContainer);
+      } else {
+        const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
+        builders.forEach(builder => {
+          this.builder.setZoomOnControl(builder);
+        });
+      }
+
       // setZoomOnArea
       this.builder.setZoomOnArea();
     });
@@ -99475,7 +99555,6 @@ class ContentStuff$1 {
             display:flex;
         }
 
-
         .row-outline .is-rowadd-tool, 
         .row-active .is-rowadd-tool {
             display:block;
@@ -99884,6 +99963,12 @@ class ContentStuff$1 {
             /*padding: 0 2px 4px !important;*/
             z-index: 1 !important;
         }
+        
+        /* Row Lock will hide row tool */
+        .row-lock .is-row-tool,
+        .row-lock .is-rowadd-tool {
+            display: none !important;
+        }
                 
         div[data-html] {
             min-height: 70px;
@@ -107343,7 +107428,7 @@ class Common {
 
     if (topTouched && bottomTouched) {
       block.style.top = 0;
-      block.style.bottom = 0;
+      if (!block.classList.contains('height-auto')) block.style.bottom = 0; // height-auto should not have bottom=0
       block.style.height = '';
     }
     if (leftTouched && rightTouched) {
@@ -107352,13 +107437,21 @@ class Common {
       block.style.width = '';
     }
     if (bottomTouched && !topTouched) {
-      block.style.bottom = 0;
+      if (!block.classList.contains('height-auto')) block.style.bottom = 0; // height-auto should not have bottom=0
       block.style.height = '';
     }
     if (rightTouched && !leftTouched) {
       block.style.right = 0;
       block.style.width = '';
     }
+
+    // reset
+    setTimeout(() => {
+      this.horizontalRulerTop.removeAttribute('data-topTouched');
+      this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
+      this.verticalRulerLeft.removeAttribute('data-leftTouched');
+      this.verticalRulerRight.removeAttribute('data-rightTouched');
+    }, 10);
   }
   applyPixels(block) {
     const zoom = this.zoom;
@@ -108590,6 +108683,8 @@ class Resizable {
     this.doc.addEventListener('mouseup', this.handleResizeEnd);
     this.doc.addEventListener('touchmove', this.handleResizeMove);
     this.doc.addEventListener('touchend', this.handleResizeEnd);
+    document.addEventListener('mouseup', this.handleResizeEnd); // in iframe, mouseup can be triggered outside the iframe (during resizing)
+    document.addEventListener('touchend', this.handleResizeEnd);
   }
   handleResizeMove(event) {
     if (this.isResizing) {
@@ -108640,6 +108735,8 @@ class Resizable {
     this.doc.removeEventListener('mouseup', this.handleResizeEnd);
     this.doc.removeEventListener('touchmove', this.handleResizeMove);
     this.doc.removeEventListener('touchend', this.handleResizeEnd);
+    document.removeEventListener('mouseup', this.handleResizeEnd); // in iframe, mouseup can be triggered outside the iframe (during resizing)
+    document.removeEventListener('touchend', this.handleResizeEnd);
     this.ruler.hideRulers();
   }
   resizeTopLeft(deltaX, deltaY) {
@@ -109060,8 +109157,12 @@ class Draggable {
       target.setAttribute('data-starty', y);
 
       // reset (from applyPercentage bottomTouched)
-      target.style.height = target.offsetHeight + 'px';
-      target.style.bottom = '';
+      if (target.style.bottom) {
+        if (!target.classList.contains('height-auto')) {
+          target.style.height = target.offsetHeight + 'px';
+        }
+        target.style.bottom = '';
+      }
       this.common.applyPixels(target);
     });
     this.clickedBlock = this.common.getSelectedBlock();
@@ -109184,6 +109285,15 @@ class Draggable {
     if (this.onChange) this.onChange();
   }
   handleSelect(event) {
+    if (!this.doc.querySelector(this.selector + '.active')) {
+      // Make the current scrollbar state (visible or not) to stay during the block select (drag or resize)
+      let scrollbar = this.doc.documentElement.scrollHeight > this.doc.documentElement.clientHeight;
+      if (!scrollbar) {
+        this.doc.body.style.overflowY = 'hidden';
+      } else {
+        this.doc.body.style.overflowY = 'scroll';
+      }
+    }
     const element = event.target;
     if (element.classList.contains('rotate-handle')) return;
     const block = element.closest(this.selector);
@@ -109233,6 +109343,9 @@ class Draggable {
       this.doc.querySelectorAll(this.selector + '.active').forEach(elm => elm.classList.remove('active'));
       this.doc.querySelectorAll('.block-active').forEach(elm => elm.classList.remove('block-active'));
       if (this.onSelectClear) this.onSelectClear();
+
+      // Return back the scrollbar state when clicking on page (not block)
+      this.doc.body.style.overflowY = ''; // see handleSelect()
     }
 
     // Check if multiple selection occurs. If so, add 'multi' class to hide all the handles
@@ -113448,6 +113561,59 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       }
     });
 
+    // Canvas Mode
+    const copyBlock = e => {
+      const docContainer = this.doc.querySelector(this.docContainer);
+      if ((e.ctrlKey || e.metaKey) && e.which === 67) {
+        //CTRL-C
+        const activeBlock = docContainer.querySelector('.is-block.active'); // always get .cloned
+        if (activeBlock) {
+          this.copyBlock = activeBlock;
+        }
+      }
+    };
+    const pasteBlock = e => {
+      const docContainer = this.doc.querySelector(this.docContainer);
+      if ((e.ctrlKey || e.metaKey) && e.which === 86) {
+        //CTRL-V
+
+        const box = docContainer.querySelector('.is-box.box-select'); // always get .cloned
+        let block = this.copyBlock;
+        if (box && block) {
+          if (document.querySelector('.is-modal.active:not(.is-modal-content)')) return;
+          const focusedElement = e.target;
+          const isEditable = focusedElement.tagName === 'INPUT' || focusedElement.tagName === 'TEXTAREA' || focusedElement.hasAttribute('contenteditable');
+          if (isEditable) return;
+          this.uo.saveForUndo();
+          let block = this.copyBlock;
+          const builder = block.querySelector(this.container);
+          let html = '';
+          if (builder) {
+            html = this.readHtml(builder);
+          }
+          let clonedDiv = block.cloneNode(true);
+          clonedDiv.style.top = '20%';
+          clonedDiv.style.left = '20%';
+          if (builder) {
+            const cloneBuilder = clonedDiv.querySelector(this.container);
+            cloneBuilder.innerHTML = '';
+            box.appendChild(clonedDiv);
+            const range = document.createRange();
+            cloneBuilder.appendChild(range.createContextualFragment(html));
+            this.applyBehaviorOn(cloneBuilder);
+            cloneBuilder.click();
+          } else {
+            block.parentNode.appendChild(clonedDiv);
+          }
+          block.classList.remove('active');
+          this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
+          this.doc.querySelectorAll('.cloned').forEach(elm => elm.classList.remove('cloned'));
+          this.eb.refresh();
+          this.opts.onChange();
+        }
+      }
+    };
+
     // SHIFT + Right Clidk to Zoom In
     if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
       //--- see loadHtml ---
@@ -113519,53 +113685,41 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       document.addEventListener('keydown', e => {
         if ((e.ctrlKey || e.metaKey) && e.which === 67) {
           //CTRL-C
-          const activeBlock = docContainer.querySelector('.is-block.active'); // always get .cloned
-          if (activeBlock) {
-            this.copyBlock = activeBlock;
-          }
+          copyBlock(e);
         }
       });
       document.addEventListener('keydown', e => {
         if ((e.ctrlKey || e.metaKey) && e.which === 86) {
           //CTRL-V
-
-          const box = docContainer.querySelector('.is-box.box-select'); // always get .cloned
-          let block = this.copyBlock;
-          if (box && block) {
-            if (document.querySelector('.is-modal.active:not(.is-modal-content)')) return;
-            const focusedElement = e.target;
-            const isEditable = focusedElement.tagName === 'INPUT' || focusedElement.tagName === 'TEXTAREA' || focusedElement.hasAttribute('contenteditable');
-            if (isEditable) return;
-            this.uo.saveForUndo();
-            let block = this.copyBlock;
-            const builder = block.querySelector(this.container);
-            let html = '';
-            if (builder) {
-              html = this.readHtml(builder);
-            }
-            let clonedDiv = block.cloneNode(true);
-            clonedDiv.style.top = '20%';
-            clonedDiv.style.left = '20%';
-            if (builder) {
-              const cloneBuilder = clonedDiv.querySelector(this.container);
-              cloneBuilder.innerHTML = '';
-              box.appendChild(clonedDiv);
-              const range = document.createRange();
-              cloneBuilder.appendChild(range.createContextualFragment(html));
-              this.applyBehaviorOn(cloneBuilder);
-              cloneBuilder.click();
-            } else {
-              block.parentNode.appendChild(clonedDiv);
-            }
-            block.classList.remove('active');
-            this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
-            this.doc.querySelectorAll('.cloned').forEach(elm => elm.classList.remove('cloned'));
-            this.eb.refresh();
-            this.opts.onChange();
-          }
+          pasteBlock(e);
         }
       });
     }
+    if (this.canvas && this.isContentBox) {
+      // Copy & Paste Block
+      document.addEventListener('keydown', e => {
+        if ((e.ctrlKey || e.metaKey) && e.which === 67) {
+          copyBlock(e);
+        }
+      });
+      document.addEventListener('keydown', e => {
+        if ((e.ctrlKey || e.metaKey) && e.which === 86) {
+          pasteBlock(e);
+        }
+      });
+      if (this.iframe) {
+        this.doc.addEventListener('keydown', e => {
+          if ((e.ctrlKey || e.metaKey) && e.which === 67) {
+            copyBlock(e);
+          }
+        });
+        this.doc.addEventListener('keydown', e => {
+          if ((e.ctrlKey || e.metaKey) && e.which === 86) {
+            pasteBlock(e);
+          }
+        });
+      }
+    }
     let previousWidth = this.win.innerWidth;
     let timer;
     const debounce = (func, delay) => {
@@ -117883,13 +118037,14 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         boxes = this.doc.querySelectorAll(this.blockContainer);
       }
       boxes.forEach(box => {
-        box.insertAdjacentHTML('afterbegin', `
-                <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>
-                `);
+        // box.insertAdjacentHTML('afterbegin', `
+        // <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',
@@ -117987,9 +118142,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
                     bw = '540px';
                   }
                 }
+                let containerClass = ''; // container's 'size-18 leading-14' is not for print
+                if (this.isContentBox) containerClass = ' size-18 leading-14';
                 const blockTemplate = `
                                 <div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
-                                    <div class="is-container container-new">
+                                    <div class="is-container container-new${containerClass}">
                                     [%CONTENT%]
                                     </div>
                                 </div>
@@ -118039,9 +118196,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
                     bw = '540px';
                   }
                 }
+                let containerClass = ''; // container's 'size-18 leading-14' is not for print
+                if (this.isContentBox) containerClass = ' size-18 leading-14';
                 const blockTemplate = `
                                 <div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
-                                    <div class="is-container container-new">
+                                    <div class="is-container container-new${containerClass}">
                                     [%CONTENT%]
                                     </div>
                                 </div>
@@ -118077,6 +118236,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
               });
               let dummies = this.doc.querySelectorAll('.block-dummy');
               dummies.forEach(elm => elm.parentNode.removeChild(elm));
+              this.sortableOnCanvas = [];
             }
             if (this.sortableOnPage) this.sortableOnPage.destroy();
           }
@@ -118294,6 +118454,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             });
             let dummies = this.doc.querySelectorAll('.block-dummy');
             dummies.forEach(elm => elm.parentNode.removeChild(elm));
+            this.sortableOnCanvas = [];
           }
           if (this.sortableOnPage) this.sortableOnPage.destroy();
         }
@@ -133571,6 +133732,8 @@ class Section {
       this.builder.activeBox = section.querySelector('.box-select');
     }
 
+    if (this.builder.eb) this.builder.eb.refresh(); // freeform
+
     this.builder.onRender();
     this.builder.onChange();
   }
@@ -145384,7 +145547,7 @@ class ContentBox {
       assetRefresh: false,
       slider: '',
       navbar: false,
-      screenMode: 'desktop',
+      screenMode: 'fullview',
       onRender: function () {},
       onChange: function () {},
       // onImageBrowseClick: function () { },
@@ -145454,7 +145617,7 @@ class ContentBox {
       toolbar: 'top',
       toolbarDisplay: 'auto',
       toolbarAddSnippetButton: false,
-      paste: 'html-without-styles',
+      paste: 'text',
       builderMode: '',
       rowcolOutline: true,
       elementSelection: true,
@@ -148817,6 +148980,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     this.editor = new ContentBuilder({
       controlPanel: this.settings.controlPanel,
       canvas: this.settings.canvas,
+      docContainer: this.settings.wrapper,
       consoleLog: this.settings.consoleLog,
       isContentBox: true,
       speechTranscribeUrl: this.settings.speechTranscribeUrl,
@@ -149285,10 +149449,14 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
           display: none !important;
         }
         .hard-select .box-select {
-          outline: #00da89 1px solid;
-          outline-offset: -1px;
-          z-index: 1;
+            outline: #00da89 1px solid;
+            outline-offset: -1px;
+            z-index: 1;
         }
+        .hard-select .box-select.box-canvas {
+            outline: #ff9fda 1px solid;
+        }
+
         .hard-select .box-select .is-box-tool {
           display: flex !important;
         }