@innovastudio/contentbox 1.2.10 → 1.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.2.10",
+  "version": "1.2.13",
   "type": "module",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
@@ -40,7 +40,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.1.12",
+    "@innovastudio/contentbuilder": "^1.1.15",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",

package/public/contentbox/contentbox.esm.js

@@ -1976,7 +1976,7 @@ class EditSection {
     this.builder = builder;
     const builderStuff = this.builder.builderStuff;
     this.builderStuff = builderStuff;
-    let html = '<div class="is-modal delsectionconfirm">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>' + '<div id="divSectionGeneral" class="is-tab-content" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
+    let html = '<div class="is-modal delsectionconfirm">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>' + '<div id="divSectionGeneral" class="is-tab-content" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div class="div-section-bgcolor" style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
     '<button title="' + out('Clear') + '" class="cmd-section-anim-start" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('End') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-end" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-end" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Slide Back') + '" class="cmd-section-anim-end" data-value="slide-back">' + out('Slide Back') + '</button>' + '<button title="' + out('Overlap') + '" class="cmd-section-anim-end" data-value="overlap">' + out('Overlap') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-end" data-value="zoom-in">' + out('Zoom In') + '</button>' + '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-end" data-value="zoom-out">' + out('Zoom Out') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-anim-end" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionScrollButton" class="is-tab-content" style="display:none;padding-top:0">' + '<div style="display:none;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;padding-bottom:3px;">' + '<div style="padding-top:20px;padding-bottom:3px;">' + out('Scroll Button') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button class="cmd-scroll-preset" data-value="1" title="' + out('Apply') + '" type="button">1</button>' + '<button class="cmd-scroll-preset" data-value="2" title="' + out('Apply') + '" type="button">2</button>' + '<button class="cmd-scroll-preset" data-value="3" title="' + out('Apply') + '" type="button">3</button>' + '<button class="cmd-scroll-preset" data-value="4" title="' + out('Apply') + '" type="button">4</button>' + '<button class="cmd-scroll-preset" data-value="5" title="' + out('Apply') + '" type="button">5</button>' + '<button class="cmd-scroll-preset" data-value="6" title="' + out('Apply') + '" type="button">6</button>' + '<button class="cmd-scroll-preset" data-value="7" title="' + out('Apply') + '" type="button">7</button>' + '<button class="cmd-scroll-preset" data-value="8" title="' + out('Apply') + '" type="button">8</button>' + '<button class="cmd-scroll-preset" data-value="9" title="' + out('Apply') + '" type="button">9</button>' + '<button class="cmd-scroll-preset" data-value="10" title="' + out('Apply') + '" type="button">10</button>' + '<button class="cmd-scroll-preset" data-value="11" title="' + out('Apply') + '" type="button">11</button>' + '<button class="cmd-scroll-preset" data-value="12" title="' + out('Apply') + '" type="button">12</button>' + '<button class="cmd-scroll-preset" data-value="13" title="' + out('Apply') + '" type="button">13</button>' + '<button class="cmd-scroll-preset" data-value="14" title="' + out('Apply') + '" type="button">14</button>' + '<button class="cmd-scroll-preset" data-value="" title="' + out('Remove') + '" type="button"><svg class="is-icon-flex" style="flex:none;width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editcustomcode">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '';
     dom$L.appendHtml(builderStuff, html);
     let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
@@ -2173,6 +2173,30 @@ class EditSection {
 
       this.builder.settings.onChange();
     });
+    const colorpicker = this.builder.editor.colorpicker(); // Section Background Color
+
+    const btnSectionBgColor = modalEditSection.querySelector('.input-section-bgcolor');
+    btnSectionBgColor.addEventListener('click', () => {
+      this.builder.editor.saveForUndo(true); // checkLater = true
+
+      const section = this.builder.activeSection;
+      let bgcolor = btnSectionBgColor.style.backgroundColor;
+      colorpicker.open(s => {
+        section.style.backgroundColor = s;
+        section.style.backgroundImage = ''; //remove gradient
+
+        btnSectionBgColor.style.backgroundColor = s; // preview
+      }, bgcolor);
+    }); // Section Background Gradient
+
+    let btnSectionGradient = modalEditSection.querySelector('.input-section-gradient');
+    btnSectionGradient.addEventListener('click', () => {
+      this.builder.editor.saveForUndo(true); // checkLater = true
+
+      const section = this.builder.activeSection;
+      let gradientPicker = this.builder.editor.gradientpicker();
+      gradientPicker.open(section);
+    });
   }
 
   edit() {
@@ -2232,12 +2256,16 @@ class EditSection {
     }
 
     btns = modalEditSection.querySelectorAll('.cmd-box-spacing');
+    const divSectionBgColor = this.modalEditSection.querySelector('.div-section-bgcolor');
     btns.forEach(btn => {
       dom$L.removeClass(btn, 'on');
     });
 
     if (dom$L.hasClass(activeSection, 'box-space')) {
       if (dom$L.hasClass(activeSection, 'box-space-sm')) dom$L.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="sm"]'), 'on');else if (dom$L.hasClass(activeSection, 'box-space-m')) dom$L.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="m"]'), 'on');else if (dom$L.hasClass(activeSection, 'box-space-lg')) dom$L.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="lg"]'), 'on');else dom$L.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="default"]'), 'on');
+      divSectionBgColor.style.display = 'flex';
+    } else {
+      divSectionBgColor.style.display = 'none';
     }
 
     btns = modalEditSection.querySelectorAll('.cmd-scroll-preset');
@@ -2253,6 +2281,16 @@ class EditSection {
         let btn = modalEditSection.querySelector(`.cmd-scroll-preset[data-value="${preset}"]`);
         dom$L.addClass(btn, 'on');
       }
+    } // Background color
+
+
+    let btnSectionBgColor = modalEditSection.querySelector('.input-section-bgcolor');
+    let bgcolor = activeSection.style.backgroundColor;
+
+    if (bgcolor) {
+      btnSectionBgColor.style.backgroundColor = bgcolor; //preview
+    } else {
+      btnSectionBgColor.style.backgroundColor = '';
     } // this.builder.scrollTo(activeSection);
 
   }
@@ -2478,14 +2516,17 @@ class EditSection {
 
   boxSpacing(s) {
     const activeSection = this.builder.activeSection;
+    const divSectionBgColor = this.modalEditSection.querySelector('.div-section-bgcolor');
 
     if (s == '') {
       dom$L.removeClass(activeSection, 'box-space');
       dom$L.removeClass(activeSection, 'box-space-sm');
       dom$L.removeClass(activeSection, 'box-space-m');
       dom$L.removeClass(activeSection, 'box-space-lg');
+      divSectionBgColor.style.display = 'none';
     } else {
       dom$L.addClass(activeSection, 'box-space');
+      divSectionBgColor.style.display = 'flex';
     }
 
     if (s === 'sm') {
@@ -9688,33 +9729,47 @@ class EditBox {
       overlay = activeBox.querySelector('.is-overlay');
     } // Gradient Color
 
-
+    /*
     const s = activeBox.style.backgroundImage;
-    if (s) if (s.indexOf('linear-gradient') !== -1) {
-      // Fix
-      overlay.style.backgroundImage = s;
-      activeBox.style.backgroundImage = '';
-    } // Background color
+    if(s) if(s.indexOf('linear-gradient')!==-1){
+        // Fix
+        overlay.style.backgroundImage = s;
+        activeBox.style.backgroundImage = '';
+    }
+    */
+    // Background color
+
 
     let btnBoxBgColor = modalEditBox.querySelector('.input-box-bgcolor');
+    /*
     let bgcolor = activeBox.style.backgroundColor;
+    if(bgcolor){
+        // Fix
+        overlay.style.backgroundColor = bgcolor;
+        activeBox.style.backgroundColor = '';
+         btnBoxBgColor.style.backgroundColor = bgcolor; //preview
+    } else {
+        bgcolor = overlay.style.backgroundColor;
+        if(bgcolor) {
+            btnBoxBgColor.style.backgroundColor = bgcolor; //preview
+        } else {
+            //backward
+            bgcolor = window.getComputedStyle(activeBox, null).getPropertyValue('background-color');
+            if(bgcolor==='rgba(0, 0, 0, 0)')bgcolor='';
+            btnBoxBgColor.style.backgroundColor = bgcolor; //preview
+        }
+    }
+    */
+
+    let bgcolor = overlay.style.backgroundColor;
 
     if (bgcolor) {
-      // Fix
-      overlay.style.backgroundColor = bgcolor;
-      activeBox.style.backgroundColor = '';
       btnBoxBgColor.style.backgroundColor = bgcolor; //preview
     } else {
-      bgcolor = overlay.style.backgroundColor;
-
-      if (bgcolor) {
-        btnBoxBgColor.style.backgroundColor = bgcolor; //preview
-      } else {
-        //backward
-        bgcolor = window.getComputedStyle(activeBox, null).getPropertyValue('background-color');
-        if (bgcolor === 'rgba(0, 0, 0, 0)') bgcolor = '';
-        btnBoxBgColor.style.backgroundColor = bgcolor; //preview
-      }
+      //backward
+      bgcolor = window.getComputedStyle(activeBox, null).getPropertyValue('background-color');
+      if (bgcolor === 'rgba(0, 0, 0, 0)') bgcolor = '';
+      btnBoxBgColor.style.backgroundColor = bgcolor; //preview
     }
 
     const chkBoxAddText = modalEditBox.querySelector('.cmd-box-addtext');
@@ -57128,6 +57183,7 @@ class Image {
 
             if (this.builder.opts.assetRefresh) {
               iframe.src = this.builder.opts.imageselect;
+              this.builder.opts.assetRefresh = false;
             }
 
             if (iframe.src === 'about:blank') {
@@ -57155,6 +57211,7 @@ class Image {
 
             if (this.builder.opts.assetRefresh) {
               iframe.src = this.builder.opts.imageselect;
+              this.builder.opts.assetRefresh = false;
             }
 
             if (iframe.src === 'about:blank') {
@@ -57219,6 +57276,12 @@ class Image {
       elm = imageTool.querySelector('.image-edit');
       dom$A.addEventListener(elm, 'click', () => {
         let img = this.builder.activeImage;
+
+        if (this.builder.onImageEditClick) {
+          let result = this.builder.onImageEditClick(img);
+          if (!result) return;
+        }
+
         util.showModal(modalImageEdit, true);
         let preview = modalImageEdit.querySelector('.imageedit-preview');
         const maxW = 800;
@@ -57241,9 +57304,15 @@ class Image {
         preview.innerHTML = '<img src="" style="max-width:100%;object-fit:contain;height:100%;"/>';
         let imagePreview = modalImageEdit.querySelector('img');
         imagePreview.src = img.src;
-        this.cropper = new Cropper(imagePreview, {
-          zoomable: false
-        });
+
+        if (this.builder.setCropperConfig) {
+          this.cropper = new Cropper(imagePreview, this.builder.setCropperConfig);
+        } else {
+          this.cropper = new Cropper(imagePreview, {
+            zoomable: false
+          });
+        }
+
         document.querySelector('.moveable-control-box').style.display = 'none'; //needed by Safari (prevent z-index problem)
       }); // Set crop proportion
 
@@ -59281,6 +59350,7 @@ class Hyperlink {
 
           if (this.builder.opts.assetRefresh) {
             modalFileSelect.querySelector('iframe').src = this.builder.opts.fileselect;
+            this.builder.opts.assetRefresh = false;
           }
 
           if (modalFileSelect.querySelector('iframe').src === 'about:blank') {
@@ -59377,6 +59447,7 @@ class Hyperlink {
 
           if (this.builder.opts.assetRefresh) {
             modalFileSelect.querySelector('iframe').src = this.builder.opts.fileselect;
+            this.builder.opts.assetRefresh = false;
           }
 
           if (modalFileSelect.querySelector('iframe').src === 'about:blank') {
@@ -63877,6 +63948,11 @@ class ColumnTool {
             let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
             let iframe = modalImageSelect.querySelector('iframe');
 
+            if (this.builder.opts.assetRefresh) {
+              iframe.src = this.builder.opts.imageselect;
+              this.builder.opts.assetRefresh = false;
+            }
+
             if (iframe.src === 'about:blank') {
               iframe.src = this.builder.opts.imageselect;
             }
@@ -64579,6 +64655,11 @@ class ColumnTool {
             let modalFileSelect = builderStuff.querySelector('.is-modal.fileselect');
             let iframe = modalFileSelect.querySelector('iframe');
 
+            if (this.builder.opts.assetRefresh) {
+              iframe.src = this.builder.opts.fileselect;
+              this.builder.opts.assetRefresh = false;
+            }
+
             if (iframe.src === 'about:blank') {
               iframe.src = this.builder.opts.fileselect;
             }
@@ -64595,6 +64676,11 @@ class ColumnTool {
             let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
             let iframe = modalImageSelect.querySelector('iframe');
 
+            if (this.builder.opts.assetRefresh) {
+              iframe.src = this.builder.opts.imageselect;
+              this.builder.opts.assetRefresh = false;
+            }
+
             if (iframe.src === 'about:blank') {
               iframe.src = this.builder.opts.imageselect;
             }
@@ -72231,6 +72317,7 @@ class Rte {
 
           if (this.builder.opts.assetRefresh) {
             iframe.src = this.builder.opts.imageselect;
+            this.builder.opts.assetRefresh = false;
           }
 
           if (iframe.src === 'about:blank') {
@@ -76571,13 +76658,29 @@ class ContentBuilder {
       // onPluginsLoaded: function () { },
       // onImageBrowseClick: function () { },
       // onImageSettingClick: function () { },
+
+      /* 
+      // onImageEditClick: function () { },  // used in elementimage.js
+      // Example:
+      onImageEditClick: (activeImage)=>{
+                   activeImage.setAttribute('crossorigin', 'anonymous');
+           const cropperConfig = {
+              checkCrossOrigin:false,
+              checkOrientation:false,
+              crossOrigin:'anonymous'
+          };
+          builder.setCropperConfig = cropperConfig;
+                   return true;
+      },
+      */
+      // setCropperConfig: {}, // used in elementimage.js
       imageEmbed: true,
       imageselect: '',
       fileselect: '',
       imageSelect: '',
       fileSelect: '',
       videoSelect: '',
-      assetRefresh: true,
+      assetRefresh: false,
       // asset manager specified in imageSelect, fileSelect & videoSelect will always refreshed on click/open
       customTags: [],
       buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'zoom', 'more'],
@@ -77960,6 +78063,7 @@ class ContentBuilder {
         formUpload.parentNode.parentNode.querySelector('input[type="file"]').value = '';
       }
     });
+    this.opts.assetRefresh = true; // After file upload, make open asset refreshed
   }
 
   openImagePicker(currentUrl, callback) {
@@ -79414,35 +79518,35 @@ class ContentBuilder {
             }
 
             contentword.innerHTML = sPastedText;
-
-            if (this.opts.paste === 'html') {
-              //with styles
-              let elms = contentword.querySelectorAll('*');
-              Array.prototype.forEach.call(elms, elm => {
-                for (let n = 0; n < elm.attributes.length; n++) {
-                  if (elm.attributes[n].name !== 'style') elm.removeAttribute(elm.attributes[n].name);
-                }
-              });
-            } else {
-              //html-without-styles (default)
-              const removeAttributes = element => {
-                while (element.attributes.length > 0) {
-                  element.removeAttribute(element.attributes[0].name);
-                }
-              };
-
-              let elms = contentword.querySelectorAll('*');
-              Array.prototype.forEach.call(elms, elm => {
-                removeAttributes(elm);
-              });
+            /*
+            // remove attributes
+            if(this.opts.paste === 'html'){//with styles
+                 let elms = contentword.querySelectorAll('*');
+                Array.prototype.forEach.call(elms, (elm) => {
+                    for(let n = 0;n<elm.attributes.length;n++) {
+                        if(elm.attributes[n].name!=='style') elm.removeAttribute(elm.attributes[n].name);
+                    }
+                });
+             } else { //html-without-styles (default)
+                
+                const removeAttributes = (element) => {
+                    while (element.attributes.length > 0) {
+                        element.removeAttribute(element.attributes[0].name);
+                    }
+                };
+                let elms = contentword.querySelectorAll('*');
+                Array.prototype.forEach.call(elms, (elm) => {
+                    removeAttributes(elm);
+                });
             }
+            */
+
             /*
             Additional Cleanup:
                 - Remove p inside li
                 - Remove li with white-space: pre
             */
 
-
             let elms = contentword.querySelectorAll('li');
             Array.prototype.forEach.call(elms, elm => {
               elm.style.whiteSpace = '';
@@ -83435,6 +83539,8 @@ class ContentBox {
       onVideoSelectClick: this.settings.onVideoSelectClick,
       onImageBrowseClick: this.settings.onImageBrowseClick,
       onImageSettingClick: this.settings.onImageSettingClick,
+      onImageEditClick: this.settings.onImageEditClick,
+      setCropperConfig: this.settings.setCropperConfig,
       onPluginsLoaded: this.settings.onPluginsLoaded,
       imageselect: this.settings.imageselect,
       fileselect: this.settings.fileselect,