@innovastudio/contentbox 1.2.17 → 1.2.20

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.2.17",
-  "type": "module",
+  "version": "1.2.20",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -27,26 +26,26 @@
     "@rollup/plugin-eslint": "^8.0.1",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-node-resolve": "^13.0.6",
+    "axios": "^0.21.4",
     "babel-loader": "^8.2.2",
     "concurrently": "^6.3.0",
+    "cors": "^2.8.5",
     "css-loader": "^6.2.0",
+    "express": "^4.17.1",
+    "express-session": "^1.17.2",
+    "formidable-serverless": "^1.1.1",
     "mini-css-extract-plugin": "^2.2.0",
     "rollup": "^2.59.0",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.38.1",
     "sass-loader": "^12.1.0",
+    "sharp": "^0.30.3",
     "webpack": "^5.51.1",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.1.17",
-    "axios": "^0.21.4",
-    "cors": "^2.8.5",
-    "express": "^4.17.1",
-    "express-session": "^1.17.2",
-    "formidable-serverless": "^1.1.1",
-    "js-beautify": "^1.14.0",
-    "sharp": "^0.30.3"
+    "@innovastudio/contentbuilder": "^1.1.20",
+    "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -15702,7 +15702,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');
       }
 
@@ -18455,6 +18455,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 => {
@@ -24132,9 +24135,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;
@@ -24537,12 +24539,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%;
@@ -57300,14 +57302,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 = '';
@@ -57323,11 +57327,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);
@@ -65213,7 +65220,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>
@@ -71614,7 +71621,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>
 
@@ -76701,7 +76708,9 @@ class ContentBuilder {
            const cropperConfig = {
               checkCrossOrigin:false,
               checkOrientation:false,
-              crossOrigin:'anonymous'
+              crossOrigin:'anonymous',
+              zoomable: false,
+              viewMode: 1
           };
           builder.setCropperConfig = cropperConfig;
                    return true;
@@ -79665,10 +79674,8 @@ class ContentBuilder {
           Additional Cleanup:
               - Remove empty elements (empty p, etc)
           */
-          // $block.find('h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty,p:empty').remove();
-          this.activeCol.querySelectorAll('*:empty').forEach(x => {
-            x.remove();
-          });
+          this.activeCol.find('h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty,p:empty').remove(); // this.activeCol.querySelectorAll('*:empty').forEach((x)=>{x.remove();}); // Makes <img> removed
+
           /*
           Additional Cleanup:
               Fix HTML structure. The problem:
@@ -79716,10 +79723,9 @@ class ContentBuilder {
 
               elmActive.outerHTML = elmActive.innerHTML; //fix
               // Re-clean empty elements
+              // this.activeCol.querySelectorAll('*:empty').forEach((x)=>{x.remove();}); // Makes <img> removed
 
-              this.activeCol.querySelectorAll('*:empty').forEach(x => {
-                x.remove();
-              }); //place cursor
+              this.activeCol.find('h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty,p:empty').remove(); //place cursor
 
               if (elmClosestElement) dom$J.moveCursorToElement(elmClosestElement.previousElementSibling);else dom$J.moveCursorToElement(this.activeCol);
               let builderActive = document.querySelector('.builder-active');