@innovastudio/contentbuilder 1.1.16 → 1.1.19

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.1.16",
+  "version": "1.1.19",
+  "type":"module",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [
@@ -38,20 +39,21 @@
     "style-loader": "^3.3.0",
     "webpack": "^5.53.0",
     "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.2.1"
+    "webpack-dev-server": "^4.2.1",
+
+    "express": "^4.17.1",
+    "express-session": "^1.17.2",
+    "formidable-serverless": "^1.1.1",
+    "cors": "^2.8.5",
+    "serve-static": "^1.14.1",
+    "sharp": "^0.30.3"
   },
   "dependencies": {
     "blueimp-load-image": "^5.16.0",
-    "cors": "^2.8.5",
     "cropperjs": "^1.5.12",
-    "express": "^4.17.1",
-    "express-session": "^1.17.2",
-    "formidable-serverless": "^1.1.1",
     "js-beautify": "^1.14.0",
     "moveable": "^0.26.0",
     "rangy": "^1.3.0",
-    "serve-static": "^1.14.1",
-    "sharp": "^0.30.3",
     "sortablejs": "^1.14.0"
   }
 }

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>
@@ -56641,6 +56648,8 @@ class ElementTextStyles {
                         <option value="em">em</option>
                         <option value="vw">vw</option>
                         <option value="vh">vh</option>
+                        <option value="vmin">vmin</option>
+                        <option value="vmax">vmax</option>
                         <option value="%">%</option>
                     </select>
                 </div>
@@ -57065,6 +57074,14 @@ class ElementTextStyles {
       sFontSizeUnit = 'vh';
     }
 
+    if (s.indexOf('vmin') !== -1) {
+      sFontSizeUnit = 'vmin';
+    }
+
+    if (s.indexOf('vmax') !== -1) {
+      sFontSizeUnit = 'vmax';
+    }
+
     if (s.indexOf('%') !== -1) {
       sFontSizeUnit = '%';
     }
@@ -61015,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>
 
@@ -66102,7 +66119,9 @@ class ContentBuilder {
            const cropperConfig = {
               checkCrossOrigin:false,
               checkOrientation:false,
-              crossOrigin:'anonymous'
+              crossOrigin:'anonymous',
+              zoomable: false,
+              viewMode: 1
           };
           builder.setCropperConfig = cropperConfig;
                    return true;
@@ -66849,12 +66868,8 @@ class ContentBuilder {
         imageResizer.style.left = '-10px';
         imageResizer.style.width = '1px';
         imageResizer.style.height = '1px';
-
-        try {
-          this.moveable.updateRect();
-          document.querySelector('.moveable-control-box').style.display = 'none';
-        } catch (e) {// Do Nothing
-        }
+        this.moveable.updateRect();
+        document.querySelector('.moveable-control-box').style.display = 'none';
       }
 
       if (!(a || b || c || d || f || g || h || i || j || o || isSpecialElement) || rowClicked && !i || containerClicked) {