@innovastudio/contentbuilder 1.5.11 → 1.5.13

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -2515,6 +2515,10 @@ button:focus-visible {
   box-sizing: border-box;
   height: 590px;
 }
+#_cbhtml .is-modal.pagesize .div-page-sizes .paper-item,
+.is-ui .is-modal.pagesize .div-page-sizes .paper-item {
+  flex: none;
+}
 #_cbhtml .is-modal.pagesize [data-pagesize],
 .is-ui .is-modal.pagesize [data-pagesize] {
   background: #fff;

package/public/contentbuilder/contentbuilder.esm.js

@@ -3221,6 +3221,7 @@ class Util {
     localStorage.removeItem('_auto_editblock');
     localStorage.removeItem('_command_lang');
     localStorage.removeItem('_ai_panel_open');
+    localStorage.removeItem('_pagesize');
 
     //NOT USED
     localStorage.removeItem('_scrollableeditor');
@@ -71845,13 +71846,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')) {
@@ -71864,7 +71865,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
@@ -85075,6 +85081,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 = `
@@ -85082,24 +85089,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;">
@@ -85678,6 +85668,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: '',
@@ -88934,7 +88999,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;
@@ -88966,6 +89031,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();
@@ -89015,7 +89081,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);
       }
@@ -89055,7 +89127,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);
       }
@@ -89107,7 +89185,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);
       }
@@ -89816,6 +89900,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