@innovastudio/contentbuilder 1.3.78 → 1.3.80

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -2065,7 +2065,7 @@ button:focus-visible {
 }
 #_cbhtml .is-modal.viewconfig div.is-modal-content,
 .is-ui .is-modal.viewconfig div.is-modal-content {
-  max-width: 700px;
+  max-width: 750px;
   padding: 5px 25px 25px 25px;
 }
 #_cbhtml .is-modal.viewhtml, #_cbhtml .is-modal.viewhtmlformatted, #_cbhtml .is-modal.viewhtmlnormal,
@@ -2921,7 +2921,7 @@ button:focus-visible {
 #_cbhtml .is-modal.viewconfig button.input-setcolor,
 .is-ui .is-modal.viewconfig button.input-setcolor {
   width: 27px;
-  height: 25px;
+  height: 21px;
   border: transparent 2px solid;
   border-radius: 0px;
 }

package/public/contentbuilder/contentbuilder.esm.js

@@ -5664,6 +5664,7 @@ class Util {
 
     localStorage.removeItem('_snippetssidebardisplay'); //snippetsSidebarDisplay
 
+    localStorage.removeItem('_htmlview');
     localStorage.removeItem('_pasteresult'); //DON'T HAVE PROP
     //NOT USED
 
@@ -14688,9 +14689,10 @@ class HtmlUtil {
 
       let range = document.createRange();
       range.setStart(area, 0);
-      area.appendChild(range.createContextualFragment(html));
-      let builderActive = this.builder.doc.querySelector('.builder-active');
-      if (builderActive) this.builder.applyBehaviorOn(builderActive);
+      area.appendChild(range.createContextualFragment(html)); // let builderActive = this.builder.doc.querySelector('.builder-active');
+      // if(builderActive) this.builder.applyBehaviorOn(builderActive);
+
+      this.builder.applyBehaviorOn(area);
       /*else {
            const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
           if(builders.length > 1) {
@@ -14919,8 +14921,13 @@ class HtmlUtil {
       }
 
       let textarea = viewhtml.querySelector('textarea');
-      this.builder.cleanHtmlFormatting = true;
-      textarea.value = this.readHtml(area, true); // for view=true
+      this.builder.cleanHtmlFormatting = true; // textarea.value = this.readHtml(area, true); // for view=true
+
+      if (this.builder.shortenHTML) {
+        textarea.value = this.readHtml(area, true); // for view=true
+      } else {
+        textarea.value = this.readHtml(area, false); // actual
+      }
 
       this.builder.cleanHtmlFormatting = false;
     }
@@ -65298,7 +65305,7 @@ class Preferences {
                 
                     <div style="display:flex;flex-wrap:wrap;width:100%;padding-top:32px;">
                         <div style="width:50%">
-                            <label id="divBuilderMode" style="display:block;margin-top:14px;margin-bottom:5px;">
+                            <label id="divBuilderMode" style="display:block;margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Builder Mode')}:&nbsp;
                                 <select class="select-buildermode">
                                     <option value="">${util.out('Default')}</option>
@@ -65307,7 +65314,7 @@ class Preferences {
                                 </select>
                             </label>
                             
-                            <label id="divOutlineMode" style="display:block;margin-top:14px;margin-bottom:5px;">
+                            <label id="divOutlineMode" style="display:block;margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Outline Mode')}:&nbsp;
                                 <select class="select-outlinemode">
                                     <option value="">${util.out('Row & column')}</option>
@@ -65315,7 +65322,7 @@ class Preferences {
                                 </select>
                             </label>
 
-                            <label style="display:block;margin-top:14px;margin-bottom:5px;">
+                            <label style="display:block;margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Outline Style')}:&nbsp;
                                 <select class="select-outlinestyle">
                                     <option value="">${util.out('Colored')}</option>
@@ -65323,15 +65330,27 @@ class Preferences {
                                 </select>
                             </label>
                             
-                            <label style="display:block;margin-top:14px;margin-bottom:10px;">
+                            <label style="display:block;margin-top:10px;margin-bottom:10px;">
                                 <input class="input-hiderowcoloutline" type="checkbox" /> ${util.out('Hide Outline')}&nbsp;
                             </label>  
 
-                            <label id="divHideCellTool" style="display:block;margin-top:14px;margin-bottom:10px;">
+                            <label id="divHideCellTool" style="display:block;margin-top:10px;margin-bottom:10px;">
                                 <input class="input-hidecelltool" type="checkbox" />  ${util.out('Hide Column Tool')}&nbsp;
                             </label>
 
-                            <label style="display:block;margin-top:5px;margin-bottom:5px;">
+
+                            <label style="display:block;margin-top:10px;margin-bottom:10px;">
+                                <input class="input-hidesnippetaddtool" type="checkbox" />  ${util.out('Hide Snippet (+) Tool')}&nbsp;
+                            </label>
+
+                            <label style="display:block;margin-top:10px;margin-bottom:10px;">
+                                <input class="input-hideelementtool" type="checkbox" /> ${util.out('Hide element tool')}&nbsp;
+                            </label>  
+
+                            <label style="display:block;margin-top:10px;margin-bottom:10px;">
+                                <input class="input-hideelementhighlight" type="checkbox" /> ${util.out('Hide element highlight')}&nbsp;
+                            </label>  
+                            <label style="display:block;margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Row Tool Position')}:&nbsp;
                                 <select class="select-rowtool">
                                     <option value="right">${util.out('Right')}</option>
@@ -65339,7 +65358,7 @@ class Preferences {
                                 </select>
                             </label>   
 
-                            <label style="display:block;margin-top:5px;margin-bottom:5px;">
+                            <label style="display:block;margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Tool Style')}:&nbsp;
                                 <select class="select-toolstyle">
                                     <option value="">${util.out('Colored')}</option>
@@ -65350,23 +65369,11 @@ class Preferences {
                         </div>
                         <div style="width:50%">
 
-                            <label style="display:block;margin-top:14px;margin-bottom:10px;">
-                                <input class="input-hidesnippetaddtool" type="checkbox" />  ${util.out('Hide Snippet (+) Tool')}&nbsp;
-                            </label>
-
-                            <label style="display:block;margin-top:14px;margin-bottom:10px;">
-                                <input class="input-hideelementtool" type="checkbox" /> ${util.out('Hide element tool')}&nbsp;
-                            </label>  
-
-                            <label style="display:block;margin-top:14px;margin-bottom:10px;">
-                                <input class="input-hideelementhighlight" type="checkbox" /> ${util.out('Hide element highlight')}&nbsp;
-                            </label>  
-
-                            <label class="option-opensnippets" style="display:block;margin-top:14px;margin-bottom:10px;">
+                            <label class="option-opensnippets" style="display:block;margin-top:10px;margin-bottom:10px;">
                                 <input class="input-opensnippets" type="checkbox" />  ${util.out('Open snippets sidebar on start')}&nbsp;
                             </label>
 
-                            <label style="display:${builder.opts.snippetList === '#divSnippetList' ? 'block' : 'none'};margin-top:14px;margin-bottom:5px;">
+                            <label style="display:${builder.opts.snippetList === '#divSnippetList' ? 'block' : 'none'};margin-top:10px;margin-bottom:5px;">
                                ${util.out('Snippets sidebar visibility')}:&nbsp;
                                 <select class="select-snippetssidebardisplay">
                                     <option value="auto">${util.out('Auto')}</option>
@@ -65374,16 +65381,7 @@ class Preferences {
                                 </select>
                             </label>
 
-                            <label style="display:block;margin-top:5px;margin-bottom:5px;">
-                                ${util.out('Paste result')}:&nbsp;
-                                <select class="select-pasteresult">
-                                    <option value="html-without-styles">${util.out('HTML (without styles)')}</option>
-                                    <option value="html">${util.out('HTML (with styles)')}</option>
-                                    <option value="text">${util.out('Text only')}</option>
-                                </select>
-                            </label>  
-
-                            <label style="display:none;margin-top:14px;margin-bottom:5px;">
+                            <label style="display:block;margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Toolbar visibility')}:&nbsp;
                                 <select class="select-editingtoolbardisplay">
                                     <option value="auto">${util.out('Auto')}</option>
@@ -65391,7 +65389,7 @@ class Preferences {
                                 </select>
                             </label>
 
-                            <label style="${this.builder.isTouchSupport ? 'display:none;' : 'display:block;'}margin-top:5px;margin-bottom:5px;">
+                            <label style="${this.builder.isTouchSupport ? 'display:none;' : 'display:block;'}margin-top:10px;margin-bottom:5px;">
                                 ${util.out('Toolbar position')}:&nbsp;
                                 <select class="select-editingtoolbar">
                                     <option value="topfull">${util.out('Top (Full Width)')}</option>
@@ -65401,8 +65399,25 @@ class Preferences {
                                 </select>
                             </label> 
 
+                            <label style="display:block;margin-top:10px;margin-bottom:5px;">
+                                ${util.out('Paste result')}:&nbsp;
+                                <select class="select-pasteresult">
+                                    <option value="html-without-styles">${util.out('HTML (without styles)')}</option>
+                                    <option value="html">${util.out('HTML (with styles)')}</option>
+                                    <option value="text">${util.out('Text only')}</option>
+                                </select>
+                            </label>  
+
+                            <label style="display:block;margin-top:10px;margin-bottom:5px;">
+                                ${util.out('HTML View')}:&nbsp;
+                                <select class="select-htmlview">
+                                    <option value="shorten">${util.out('Shorten HTML')}</option>
+                                    <option value="actual">${util.out('Actual')}</option>
+                                </select>
+                            </label>  
+
                             ${this.builder.themes ? `
-                                <label style="${this.builder.isTouchSupport ? 'display:none;' : 'display:block;'}margin-top:5px;margin-bottom:5px;">
+                                <label style="${this.builder.isTouchSupport ? 'display:none;' : 'display:block;'}margin-top:10px;margin-bottom:5px;">
                                     ${util.out('Theme')}:&nbsp;
                                 </label> 
                                 ${htmlThemes}
@@ -65459,6 +65474,16 @@ class Preferences {
         this.builder.opts.paste = localStorage.getItem('_pasteresult');
       }
 
+      if (localStorage.getItem('_htmlview') !== null) {
+        let htmlView = localStorage.getItem('_htmlview');
+
+        if (htmlView === 'shorten') {
+          this.builder.opts.shortenHTML = true;
+        } else {
+          this.builder.opts.shortenHTML = false;
+        }
+      }
+
       if (localStorage.getItem('_hidecelltool') !== null) {
         if (localStorage.getItem('_hidecelltool') === '1') {
           this.builder.opts.columnTool = false;
@@ -65524,12 +65549,13 @@ class Preferences {
       }
 
       this.setToolStyle(this.builder.opts.toolStyle); // Always Auto
-      // if (localStorage.getItem('_editingtoolbardisplay') !== null) {
-      //     this.builder.opts.toolbarDisplay = localStorage.getItem('_editingtoolbardisplay');
-      // }
-      // this.builder.opts.toolbarDisplay = 'auto';
+
+      if (localStorage.getItem('_editingtoolbardisplay') !== null) {
+        this.builder.opts.toolbarDisplay = localStorage.getItem('_editingtoolbardisplay');
+      } // this.builder.opts.toolbarDisplay = 'auto';
       // this.setToolbarDisplay(this.builder.opts.toolbarDisplay);
 
+
       if (localStorage.getItem('_snippetssidebardisplay') !== null) {
         this.builder.opts.snippetsSidebarDisplay = localStorage.getItem('_snippetssidebardisplay');
       }
@@ -65655,6 +65681,12 @@ class Preferences {
     this.config.querySelector('.select-editingtoolbardisplay').value = this.builder.opts.toolbarDisplay;
     this.config.querySelector('.select-editingtoolbar').value = this.builder.opts.toolbar;
     this.config.querySelector('.select-snippetssidebardisplay').value = this.builder.opts.snippetsSidebarDisplay;
+
+    if (this.builder.opts.shortenHTML) {
+      this.config.querySelector('.select-htmlview').value = 'shorten';
+    } else {
+      this.config.querySelector('.select-htmlview').value = 'actual';
+    }
   }
 
   update() {
@@ -65750,10 +65782,10 @@ class Preferences {
     this.setToolStyle(toolStyle);
     let pasteResult = this.config.querySelector('.select-pasteresult').value;
     this.builder.opts.paste = pasteResult;
-    localStorage.setItem('_pasteresult', pasteResult); // let toolbarDisplay = this.config.querySelector('.select-editingtoolbardisplay').value;
-    // this.builder.opts.toolbarDisplay = toolbarDisplay;
-    // localStorage.setItem('_editingtoolbardisplay', toolbarDisplay);
-    // this.setToolbarDisplay(toolbarDisplay);
+    localStorage.setItem('_pasteresult', pasteResult);
+    let toolbarDisplay = this.config.querySelector('.select-editingtoolbardisplay').value;
+    this.builder.opts.toolbarDisplay = toolbarDisplay;
+    localStorage.setItem('_editingtoolbardisplay', toolbarDisplay); // this.setToolbarDisplay(toolbarDisplay);
 
     let snippetsSidebarDisplay = this.config.querySelector('.select-snippetssidebardisplay').value;
     this.builder.opts.snippetsSidebarDisplay = snippetsSidebarDisplay;
@@ -65762,6 +65794,15 @@ class Preferences {
     this.builder.opts.toolbar = toolbar;
     localStorage.setItem('_editingtoolbar', toolbar);
     this.setToolbar(toolbar);
+    let htmlView = this.config.querySelector('.select-htmlview').value;
+
+    if (htmlView === 'shorten') {
+      this.builder.opts.shortenHTML = true;
+    } else {
+      this.builder.opts.shortenHTML = false;
+    }
+
+    localStorage.setItem('_htmlview', htmlView);
 
     if (this.builder.themes) {
       const n = this.builder.themeIndex;
@@ -74890,6 +74931,7 @@ class ContentBuilder {
       snippetOpen: false,
       toolbar: 'top',
       toolbarDisplay: 'auto',
+      shortenHTML: true,
       snippetsSidebarDisplay: 'auto',
       // snippetDisplay: 'auto', // values: auto, visible (a new alternative). If used, will set the snippetsSidebarDisplay
       // onImageSelectClick: function () { },