@innovastudio/contentbox 1.6.33 → 1.6.34

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -13451,8 +13451,14 @@ class PanelBox {
     if (!this.builder.onUploadCoverImage) btnUpload.style.display = 'none';
     const btnOpenAsset = panel.querySelector('.btn-asset');
     btnOpenAsset.addEventListener('click', () => {
-      this.builder.editor.openAssetSelect('image', src => {
+      this.builder.editor.openAssetSelect('image', (src, f) => {
         this.updateImage(src);
+
+        if (f) {
+          const activeBox = this.builder.activeBox;
+          let overlayBg = activeBox.querySelector('.is-overlay-bg');
+          if (overlayBg) overlayBg.setAttribute('data-filename', f);
+        }
       }, btnOpenAsset);
     }); // Show/hide button
 
@@ -13830,9 +13836,14 @@ class PanelBox {
     if (!this.builder.onMediaUpload) btnUpload2.style.display = 'none';
     const btnOpenAsset2 = panel.querySelector('.btn-asset-2');
     btnOpenAsset2.addEventListener('click', () => {
-      this.builder.editor.openAssetSelect('media', src => {
+      this.builder.editor.openAssetSelect('media', (src, f) => {
         inpSrc2.value = src;
         this.box.applyBoxClick(src);
+
+        if (f) {
+          const activeBox = this.builder.activeBox;
+          activeBox.setAttribute('data-filename', f);
+        }
       }, btnOpenAsset2);
     }); // Show/hide button
 
@@ -16738,8 +16749,13 @@ class PanelColumn {
     if (!this.builder.onImageUpload) btnUpload.style.display = 'none';
     const btnOpenAsset = panel.querySelector('.btn-asset');
     btnOpenAsset.addEventListener('click', () => {
-      this.builder.editor.openAssetSelect('image', src => {
+      this.builder.editor.openAssetSelect('image', (src, f) => {
         this.updateImage(src);
+
+        if (f) {
+          let activeColumn = this.builder.controlpanel.activeColumn;
+          activeColumn.setAttribute('data-filename', f);
+        }
       }, btnOpenAsset);
     }); // Show/hide button
 
@@ -17085,9 +17101,14 @@ class PanelColumn {
     if (!this.builder.onMediaUpload) btnUpload2.style.display = 'none';
     const btnOpenAsset2 = panel.querySelector('.btn-asset-2');
     btnOpenAsset2.addEventListener('click', () => {
-      this.builder.editor.openAssetSelect('media', src => {
+      this.builder.editor.openAssetSelect('media', (src, f) => {
         inpSrc2.value = src;
         this.applyClick(src);
+
+        if (f) {
+          let activeColumn = this.builder.controlpanel.activeColumn;
+          activeColumn.setAttribute('data-filename', f);
+        }
       }, btnOpenAsset2);
     }); // Show/hide button
 
@@ -17704,8 +17725,13 @@ class PanelRow {
     if (!this.builder.onImageUpload) btnUpload.style.display = 'none';
     const btnOpenAsset = panel.querySelector('.btn-asset');
     btnOpenAsset.addEventListener('click', () => {
-      this.builder.editor.openAssetSelect('image', src => {
+      this.builder.editor.openAssetSelect('image', (src, f) => {
         this.updateImage(src);
+
+        if (f) {
+          const row = this.rowOverlay();
+          row.setAttribute('data-filename', f);
+        }
       }, btnOpenAsset);
     }); // Show/hide button
 
@@ -28658,6 +28684,7 @@ class Util$1 {
     localStorage.removeItem('_auto_editblock');
     localStorage.removeItem('_command_lang');
     localStorage.removeItem('_ai_panel_open');
+    localStorage.removeItem('_pagesize');
 
     //NOT USED
     localStorage.removeItem('_scrollableeditor');
@@ -97282,13 +97309,13 @@ class SaveImages {
     const divs = area.querySelectorAll('.is-overlay-bg,.is-container > div > div,.is-lightbox,.block-click');
     divs.forEach(div => {
       let src = '';
-      if (div.style.backgroundImage) {
+      if (div.style.backgroundImage && div.style.backgroundImage.includes('base64')) {
         if (div.style.backgroundImage.indexOf('url(') !== -1) {
           src = div.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
         }
-      } else if (div.classList.contains('is-lightbox')) {
+      } else if (div.classList.contains('is-lightbox') && div.getAttribute('href').includes('base64')) {
         src = div.getAttribute('href');
-      } else if (div.classList.contains('block-click')) {
+      } else if (div.classList.contains('block-click') && div.style.backgroundImage && !div.style.backgroundImage.includes('base64')) {
         src = div.getAttribute('data-modal-url');
       }
       if (src.includes('base64')) {
@@ -97301,7 +97328,12 @@ class SaveImages {
           //Read image (base64 string)
           let image = src;
           image = image.replace(/^data:image\/(png|svg\+xml|jpeg);base64,/, '');
-          let filename = this.builder.util.makeId() + '.' + ext; //img.getAttribute('data-filename');
+          let filename;
+          if (div.hasAttribute('data-filename')) {
+            filename = div.getAttribute('data-filename');
+          } else {
+            filename = this.builder.util.makeId() + '.' + ext;
+          }
 
           // console.log(div)
           this.opts.onBase64Upload(div, image, filename); // target image, base64 string, filename
@@ -110512,6 +110544,7 @@ class PageSize {
     const builderStuff = this.builderStuff;
     const util = this.util;
     const dom = this.dom;
+    const pageSizes = this.builder.pageSizes;
     let modal = builderStuff.querySelector('.is-modal.pagesize');
     if (!modal) {
       const html = `
@@ -110519,24 +110552,7 @@ class PageSize {
                 <div class="is-modal-content">
     
                     <div class="div-page-sizes">
-                        <button title="Web" data-pagesize="100%,100vh,web" data-width="" data-height="" style="flex:none;width:180px;height:112.5px" class="paper-item">Web (full)</button>
-                        <button title="Web" data-pagesize="800px,1000px,web" data-width="" data-height="" style="flex:none;width:180px;height:112.5px" class="paper-item">Web (container)</button>
-                        <button title="8.27x5.52" data-pagesize="8.27in,5.52in" data-width="8.27in" data-height="5.52in" style="flex:none;width:124.05px;height:82.8px" class="paper-item">8.27x5.52</button>
-                        <button title="8.3x5.8" data-pagesize="8.3in,5.8in" data-width="8.3in" data-height="5.8in" style="flex:none;width:124.50000000000001px;height:87px" class="paper-item">A5</button>
-                        <button title="9x7" data-pagesize="9in,7in" data-width="9in" data-height="7in" style="flex:none;width:135px;height:105px" class="paper-item">9x7</button>
-                        <button title="11.7x8.3" data-pagesize="11.7in,8.3in" data-width="11.7in" data-height="8.3in" style="flex:none;width:175.5px;height:124.50000000000001px" class="paper-item">A4</button>
-                        <button title="11x8.5" data-pagesize="11in,8.5in" data-width="11in" data-height="8.5in" style="flex:none;width:165px;height:127.5px" class="paper-item">Letter</button>
-                        <button title="12.5x10" data-pagesize="12.5in,10in" data-width="12.5in" data-height="10in" style="flex:none;width:187.5px;height:150px" class="paper-item">12.5x10</button>
-                        <button title="14x11" data-pagesize="14in,11in" data-width="14in" data-height="11in" style="flex:none;width:210px;height:165px" class="paper-item">14x11</button>
-                        <button title="8.5x8.5" data-pagesize="8.5in,8.5in" data-width="8.5in" data-height="8.5in" style="flex:none;width:127.5px;height:127.5px" class="paper-item">8.5x8.5</button>
-                        <button title="10x10" data-pagesize="10in,10in" data-width="10in" data-height="10in" style="flex:none;width:150px;height:150px" class="paper-item on">10x10</button>
-                        <button title="12x12" data-pagesize="12in,12in" data-width="12in" data-height="12in" style="flex:none;width:180px;height:180px" class="paper-item">12x12</button>
-                        <button title="5.27x8.27" data-pagesize="5.27in,8.27in" data-width="5.27in" data-height="8.27in" style="flex:none;width:79.05px;height:124.05px" class="paper-item">5.27x8.27</button>
-                        <button title="5.8x8.3" data-pagesize="5.8in,8.3in" data-width="5.8in" data-height="8.3in" style="flex:none;width:87px;height:124.50000000000001px" class="paper-item">A5</button>
-                        <button title="6x9" data-pagesize="6in,9in" data-width="6in" data-height="9in" style="flex:none;width:90px;height:135px" class="paper-item">6x9</button>
-                        <button title="6.6x10.25" data-pagesize="6.6in,10.25in" data-width="6.6in" data-height="10.25in" style="flex:none;width:99px;height:153.75px" class="paper-item">6.6x10.25</button>
-                        <button title="8.5x11" data-pagesize="8.5in,11in" data-width="8.5in" data-height="11in" style="flex:none;width:127.5px;height:165px" class="paper-item">Letter</button>
-                        <button title="8.3x11.7" data-pagesize="8.3in,11.7in" data-width="8.3in" data-height="11.7in" style="flex:none;width:124.50000000000001px;height:175.5px" class="paper-item">A4</button>
+                        ${pageSizes.map(item => `<button title="${item.title}" data-pagesize="${item.pagesize}" style="${item.style}" class="paper-item">${item.title}</button>`).join('')}
                     </div>
     
                     <div class="flex" style="gap:10px;justify-content:center;margin-top:15px;">
@@ -111115,6 +111131,81 @@ class ContentBuilder {
       onBlockCanvasAdd: function () {},
       // docContainer: '.is-page',
       blockContainer: '.is-box',
+      pageSize: '100%,100vh,web',
+      //'800px,1000px,web'
+      pageSizes: [{
+        title: 'Web',
+        pagesize: '100%,100vh,web',
+        style: 'width:180px;height:112.5px'
+      }, {
+        title: 'Web (container)',
+        pagesize: '800px,1000px,web',
+        style: 'width:180px;height:112.5px'
+      }, {
+        title: '8.27x5.52',
+        pagesize: '8.27in,5.52in',
+        style: 'width:124.05px;height:82.8px'
+      }, {
+        title: '8.3x5.8',
+        pagesize: '8.3in,5.8in',
+        style: 'width:124.5px;height:87px'
+      }, {
+        title: '9x7',
+        pagesize: '9in,7in',
+        style: 'wwidth:135px;height:105px'
+      }, {
+        title: 'A4',
+        pagesize: '11.7in,8.3in',
+        style: 'width:175.5px;height:124.5px'
+      }, {
+        title: 'Letter',
+        pagesize: '11in,8.5in',
+        style: 'width:165px;height:127.5px'
+      }, {
+        title: '12.5x10',
+        pagesize: '12.5in,10in',
+        style: 'width:187.5px;height:150px'
+      }, {
+        title: '14x11',
+        pagesize: '14in,11in',
+        style: 'width:210px;height:165px'
+      }, {
+        title: '8.5x8.5',
+        pagesize: '8.5in,8.5in',
+        style: 'width:127.5px;height:127.5px'
+      }, {
+        title: '10x10',
+        pagesize: '10in,10in',
+        style: 'width:150px;height:150px'
+      }, {
+        title: '12x12',
+        pagesize: '12in,12in',
+        style: 'width:180px;height:180px'
+      }, {
+        title: '5.27x8.27',
+        pagesize: '5.27in,8.27in',
+        style: 'width:79.05px;height:124.05px'
+      }, {
+        title: 'A5',
+        pagesize: '5.8in,8.3in',
+        style: 'width:87px;height:124.5px'
+      }, {
+        title: '6x9',
+        pagesize: '6in,9in',
+        style: 'width:90px;height:135px'
+      }, {
+        title: '6.6x10.25',
+        pagesize: '6.6in,10.25in',
+        style: 'width:99px;height:153.75px'
+      }, {
+        title: 'Letter',
+        pagesize: '8.5in,11in',
+        style: 'width:127.5px;height:165px'
+      }, {
+        title: 'A4',
+        pagesize: '8.3in,11.7in',
+        style: 'width:124.5px;height:175.5px'
+      }],
       /*
       Deprecated:
       snippetSampleImage: '',
@@ -114371,7 +114462,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
 
     this.selectAsset(s);
   }
-  selectAsset(s) {
+  selectAsset(s, f) {
     let extension = s.split('.').pop().split('?')[0].split('#')[0]; //
     extension = extension.toLowerCase();
     let ok = false;
@@ -114403,6 +114494,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       }
     }
     if (ok) {
+      if (f) this.targetInput.setAttribute('data-filename', f);else this.targetInput.removeAttribute('data-filename');
       this.targetInput.value = s;
 
       // if(this.targetCallback) this.targetCallback();
@@ -114452,7 +114544,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           alert(out('Please select an image file.'));
         }
         if (ok) {
-          if (callback) callback(s);
+          // if(callback) callback(s);
+          if (callback) {
+            // if s is base64 and there is data-filename attribute set
+            let f;
+            if (inpUrl.hasAttribute('data-filename')) f = inpUrl.getAttribute('data-filename');
+            callback(s, f);
+          }
         }
         desc.set.call(this, s);
       }
@@ -114492,7 +114590,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           if (targetAssetType === 'media') alert(out('Please select an image or video file.'));
         }
         if (ok) {
-          if (callback) callback(s);
+          // if(callback) callback(s);
+          if (callback) {
+            // if s is base64 and there is data-filename attribute set
+            let f;
+            if (inpUrl.hasAttribute('data-filename')) f = inpUrl.getAttribute('data-filename');
+            callback(s, f);
+          }
         }
         desc.set.call(this, s);
       }
@@ -114544,7 +114648,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           }
         }
         if (ok) {
-          if (callback) callback(s);
+          // if(callback) callback(s);
+          if (callback) {
+            // if s is base64 and there is data-filename attribute set
+            let f;
+            if (inpUrl.hasAttribute('data-filename')) f = inpUrl.getAttribute('data-filename');
+            callback(s, f);
+          }
         }
         desc.set.call(this, s);
       }
@@ -115253,6 +115363,18 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       const docContainer = this.doc.querySelector(this.docContainer);
       let range = this.doc.createRange();
       docContainer.innerHTML = '';
+      if (!html.includes('is-box')) {
+        html = `
+                <div class="is-box box-canvas autolayout">
+                    <div class="is-block block-steady height-auto" style="top: calc(50% - 357px); left: calc(50% - 348px); width: 696px;" data--t="calc(50% - 357px)" data--l="calc(50% - 348px)" data--b="" data--r="" data--w="696px" data--h="">
+                        <div class="is-container leading-12 size-17">
+                            ${html}
+                        </div>
+                        <div class="is-block-overlay"></div>
+                    </div>
+                </div>
+                `;
+      }
       docContainer.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
 
       // set page size 
@@ -149908,9 +150030,16 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
         }
       }
 
-      this.editor.openImageSelect(src => {
+      this.editor.openImageSelect((src, f) => {
         this.editor.saveForUndo();
-        this.boxImage(src); //Trigger Change event
+        this.boxImage(src);
+
+        if (f) {
+          const activeBox = this.activeBox;
+          let overlayBg = activeBox.querySelector('.is-overlay-bg');
+          if (overlayBg) overlayBg.setAttribute('data-filename', f);
+        } //Trigger Change event
+
 
         this.onChange();
       }, currentImageUrl);