@innovastudio/contentbox 1.6.38 → 1.6.39

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.38",
+  "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.22",
+    "@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');
@@ -108682,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) {
@@ -108732,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) {
@@ -113556,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 ---
@@ -113627,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) => {
@@ -117991,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',
@@ -118095,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>
@@ -118147,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>
@@ -118185,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();
           }
@@ -118402,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();
         }
@@ -133679,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();
   }
@@ -145562,7 +145617,7 @@ class ContentBox {
       toolbar: 'top',
       toolbarDisplay: 'auto',
       toolbarAddSnippetButton: false,
-      paste: 'html-without-styles',
+      paste: 'text',
       builderMode: '',
       rowcolOutline: true,
       elementSelection: true,
@@ -148925,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,