@innovastudio/contentbuilder 1.5.22 → 1.5.24

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.22",
+  "version": "1.5.24",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -17685,6 +17685,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
             obj.destroy();
           }
         });
+        builder.sortableOnCanvas = [];
       }
       if (builder.sortableOnPage) builder.sortableOnPage.destroy();
       let dummies = builder.doc.querySelectorAll('.block-dummy');
@@ -83219,6 +83220,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) {
@@ -83269,6 +83272,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) {
@@ -88093,6 +88098,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 ---
@@ -88164,52 +88222,40 @@ 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;
@@ -92528,13 +92574,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',
@@ -92632,9 +92679,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>
@@ -92684,9 +92733,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>
@@ -92722,6 +92773,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();
           }
@@ -92939,6 +92991,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();
         }