@innovastudio/contentbox 1.5.46 → 1.5.48

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.5.46",
+  "version": "1.5.48",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -46,6 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
+    "@innovastudio/contentbuilder": "^1.4.38",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -19403,6 +19403,7 @@ class Util$1 {
         // Render custom code block
         html = decodeURIComponent(block.getAttribute('data-html'));
         html = html.replace(/{id}/g, this.makeId());
+        html = html.replace(/<script>/g, `${this.builder.nonce ? `<script nonce="${this.builder.nonce}">` : '<script>'}`);
 
         for (var i = 1; i <= 20; i++) {
           html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area
@@ -21360,7 +21361,7 @@ class Util$1 {
         ${this.getFontPreview()}
         </ul>
 
-        <script>
+        <script${this.builder.nonce ? ` nonce="${this.builder.nonce}"` : ''}>
 
             const close = () => {
                 parent.focus();
@@ -31242,7 +31243,7 @@ class Snippets {
             <ul class="is-design-list" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
             </ul>
         
-            <script>
+            <script${this.builder.nonce ? ` nonce="${this.builder.nonce}"` : ''}>
         
                 var snippetPath = '${snippetPath}';
                 var snippetCategories = ${snippetCategoriesString};
@@ -68622,6 +68623,7 @@ class Module {
         const iframe = moduleModal.querySelector('iframe');
         let result = await fetch(this.builder.opts.modulePath + modulename + '.html');
         result = await result.text();
+        result = result.replace(/<script>/g, `${this.builder.nonce ? `<script nonce="${this.builder.nonce}">` : '<script>'}`);
         let doc = iframe.contentWindow.document;
         doc.open();
         doc.write(result);
@@ -68643,6 +68645,7 @@ class Module {
 
         let html = this.builderStuff.querySelector('#hidContentModuleCode').value;
         html = html.replace(/{id}/g, this.util.makeId());
+        html = html.replace(/<script>/g, `${this.builder.nonce ? `<script nonce="${this.builder.nonce}">` : '<script>'}`);
         /* OLD
         for(var i=1;i<=20;i++){ // OLD
             html = html.replace('[%HTML'+i+'%]', (module.getAttribute('data-html-'+i) === undefined ? '' : decodeURIComponent(module.getAttribute('data-html-'+i))));//render editable area
@@ -68819,6 +68822,7 @@ class Code {
         });
         let html = decodeURIComponent(codeblock.getAttribute('data-html')); //html = html.replace(/{id}/g, this.util.makeId());
 
+        html = html.replace(/<script>/g, `${this.builder.nonce ? `<script nonce="${this.builder.nonce}">` : '<script>'}`);
         tmpbuilder.parentNode.removeChild(tmpbuilder); // Use existing modal
 
         let viewhtml;
@@ -87845,7 +87849,7 @@ class Rte {
         ${this.getIcons()}
         </div>
 
-        <script>
+        <script${this.builder.nonce ? ` nonce="${this.builder.nonce}"` : ''}>
             const setValue = (elm) => {
                 if(!elm.className) elm = elm.childNodes[0];
                 parent._cb.addIcon(elm.className);
@@ -91951,7 +91955,10 @@ class LivePreview {
                   if (!container) container = iframeDocument.querySelector('.is-container');
 
                   if (container) {
-                    container.innerHTML = html;
+                    // container.innerHTML = html;
+                    let range = this.builder.doc.createRange();
+                    container.innerHTML = '';
+                    container.appendChild(range.createContextualFragment(html));
                   } else {
                     iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
                   }
@@ -91992,8 +91999,11 @@ class LivePreview {
               } else {
                 // sync. html
                 let html = localStorage.getItem('preview-html');
-                let wrapper = iframeDocument.querySelector('.is-wrapper');
-                wrapper.innerHTML = html; // sync. styles
+                let wrapper = iframeDocument.querySelector('.is-wrapper'); // wrapper.innerHTML = html;
+
+                let range = this.builder.doc.createRange();
+                wrapper.innerHTML = '';
+                wrapper.appendChild(range.createContextualFragment(html)); // sync. styles
                 // let mainCss = localStorage.getItem('preview-maincss'); 
                 // let sectionCss = localStorage.getItem('preview-sectioncss');
 
@@ -93772,6 +93782,7 @@ class ContentBuilder {
                 // Render custom code block
                 html = decodeURIComponent(block.getAttribute('data-html'));
                 html = html.replace(/{id}/g, util.makeId());
+                html = html.replace(/<script>/g, `${this.nonce ? `<script nonce="${this.nonce}">` : '<script>'}`);
 
                 for (var i = 1; i <= 20; i++) {
                   html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area
@@ -96400,6 +96411,7 @@ class ContentBuilder {
                 // Render custom code block
                 html = decodeURIComponent(block.getAttribute('data-html'));
                 html = html.replace(/{id}/g, this.util.makeId());
+                html = html.replace(/<script>/g, `${this.nonce ? `<script nonce="${this.nonce}">` : '<script>'}`);
 
                 for (var i = 1; i <= 20; i++) {
                   html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area