@innovastudio/contentbuilder 1.1.17 → 1.1.18

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -5113,7 +5113,7 @@ class Util {
       let emptyinfo = builder.querySelector('.row-add-initial');
 
       if (!emptyinfo) {
-        builder.innerHTML = `<button type="button" class="row-add-initial">${this.out('Empty')}<br><span>${this.out('+ Click to add content')}</span></div>`;
+        builder.innerHTML = `<button type="button" class="row-add-initial">${this.out('Empty')}<br><span class="block">${this.out('+ Click to add content')}</span></div>`;
         emptyinfo = builder.querySelector('.row-add-initial');
       }
 
@@ -7866,6 +7866,9 @@ class Dom {
 
 
   cleanUnusedSpan(area) {
+    // for specific element only (during execCommand), 
+    // not for the entire ContentBuilder container, 
+    // because there can be custom blocks
     let spans = area.querySelectorAll('span');
     const filter = Array.prototype.filter;
     let children = filter.call(spans, element => {
@@ -13543,9 +13546,8 @@ class HtmlUtil {
           dom$I.removeClass(elm, this.builder.cssClasses.extend.unset);
         });
       } // Clean unused spans
+      // dom.cleanUnusedSpan(content); // REVIEW 
 
-
-      dom$I.cleanUnusedSpan(content); // REVIEW 
     }
 
     const util = this.builder.util;
@@ -13948,12 +13950,12 @@ class HtmlUtil {
                     background-color: ${this.builder.styleButtonClassicBackgroundHover}; 
                 }
                 button:focus {outline:none;}
-                textarea {font-family: courier;font-size: 17px;line-height: 2;letter-spacing: 1px;padding:8px 16px;box-sizing:border-box;border:1px solid rgb(199, 199, 199);}
+                textarea {font-family: courier, monospace;font-size: 17px;line-height: 2;letter-spacing: 1px;padding:8px 16px;box-sizing:border-box;border:1px solid rgb(199, 199, 199);}
                 textarea:focus {outline:none}  
                 
                 #code {display:none;}
                 .CodeMirror {
-                    font-family: courier;
+                    font-family: courier, monospace;
                     font-size: 15px;
                     line-height:1.9;
                     width:100%;height:100%;
@@ -46711,14 +46713,16 @@ class Image {
       elm = imageTool.querySelector('.image-edit');
       dom$A.addEventListener(elm, 'click', () => {
         let img = this.builder.activeImage;
+        let preview = modalImageEdit.querySelector('.imageedit-preview');
+        preview.innerHTML = '<img style="max-width:100%;object-fit:contain;height:100%;"/>';
+        let imagePreview = modalImageEdit.querySelector('img');
 
         if (this.builder.onImageEditClick) {
-          let result = this.builder.onImageEditClick(img);
+          let result = this.builder.onImageEditClick(img, imagePreview);
           if (!result) return;
         }
 
         util.showModal(modalImageEdit, true);
-        let preview = modalImageEdit.querySelector('.imageedit-preview');
         const maxW = 800;
         const maxH = 550;
         preview.style.height = '';
@@ -46734,11 +46738,14 @@ class Image {
           } else {
             preview.style.height = maxH + 'px';
           }
-        }
+        } // imagePreview.src = img.src;
 
-        preview.innerHTML = '<img src="" style="max-width:100%;object-fit:contain;height:100%;"/>';
-        let imagePreview = modalImageEdit.querySelector('img');
-        imagePreview.src = img.src;
+
+        if (img.src.indexOf('base64') === -1) {
+          imagePreview.src = img.src + (img.src.indexOf('?') === -1 ? '?' : '&') + `timestamp=${new Date().getTime()}`;
+        } else {
+          imagePreview.src = img.src;
+        }
 
         if (this.builder.setCropperConfig) {
           this.cropper = new Cropper(imagePreview, this.builder.setCropperConfig);
@@ -54624,7 +54631,7 @@ class ELementStyleEditor {
                     <div class="is-settings clearfix" style="display:inline-block;width:100%;margin-bottom:0;">
                         <div>${util.out('Class')}:</div>
                         <div>
-                            <input type="text" id="inpElmClassName" value="" style="width:100%;padding-left: 16px;font-family: courier;font-size: 14px;line-height: 2;letter-spacing: 1px;border:none;"/>
+                            <input type="text" id="inpElmClassName" value="" style="width:100%;padding-left: 16px;font-family: courier, monospace;font-size: 14px;line-height: 2;letter-spacing: 1px;border:none;"/>
                         </div>
                     </div>
                 </div>
@@ -61025,7 +61032,7 @@ class Rte {
                     <div title="${util.out('Heading 3')}" data-block="h3" role="button" tabindex="0"><h3>Heading 3</h3></div>
                     <div title="${util.out('Heading 4')}" data-block="h4" role="button" tabindex="0"><h4>Heading 4</h4></div>
                     <div title="${util.out('Paragraph')}" data-block="p" role="button" tabindex="0"><p>Paragraph</p></div>
-                    <div title="${util.out('Preformatted')}" data-block="pre" role="button" tabindex="0"><p style="font-family:courier;">Preformatted</p></div>
+                    <div title="${util.out('Preformatted')}" data-block="pre" role="button" tabindex="0"><p style="font-family:courier, monospace;">Preformatted</p></div>
                 </div>
             </div>
 
@@ -66112,7 +66119,9 @@ class ContentBuilder {
            const cropperConfig = {
               checkCrossOrigin:false,
               checkOrientation:false,
-              crossOrigin:'anonymous'
+              crossOrigin:'anonymous',
+              zoomable: false,
+              viewMode: 1
           };
           builder.setCropperConfig = cropperConfig;
                    return true;