@innovastudio/contentbox 1.4.66 → 1.4.68

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -1032,6 +1032,17 @@ class SideBar {
 
   viewHtml() {
     const builderStuff = this.builderStuff;
+
+    if (localStorage.getItem('_htmlview') !== null) {
+      let htmlView = localStorage.getItem('_htmlview');
+
+      if (htmlView === 'shorten') {
+        this.builder.shortenHTML = true;
+      } else {
+        this.builder.shortenHTML = false;
+      }
+    }
+
     let html;
 
     if (this.builder.shortenHTML) {
@@ -19059,15 +19070,18 @@ class Util {
       dom.removeClass(elm, 'elm-inspected');
     }); // RTE
 
-    let rtetool = builderStuff.querySelector('.is-rte-tool');
-    if (rtetool) rtetool.style.display = 'none';
-    let elementRtetool = builderStuff.querySelector('.is-elementrte-tool');
-    if (elementRtetool) elementRtetool.style.display = 'none'; // Click ok on code view should hide these as well
+    if (this.builder.toolbarDisplay === 'auto') {
+      let rtetool = builderStuff.querySelector('.is-rte-tool');
+      if (rtetool) rtetool.style.display = 'none';
+      let elementRtetool = builderStuff.querySelector('.is-elementrte-tool');
+      if (elementRtetool) elementRtetool.style.display = 'none'; // Click ok on code view should hide these as well
+
+      let rtetoolmore = builderStuff.querySelector('.rte-more-options');
+      if (rtetoolmore) rtetoolmore.style.display = '';
+      let elementRtetoolmore = builderStuff.querySelector('.elementrte-more-options');
+      if (elementRtetoolmore) elementRtetoolmore.style.display = '';
+    } // Element
 
-    let rtetoolmore = builderStuff.querySelector('.rte-more-options');
-    if (rtetoolmore) rtetoolmore.style.display = '';
-    let elementRtetoolmore = builderStuff.querySelector('.elementrte-more-options');
-    if (elementRtetoolmore) elementRtetoolmore.style.display = ''; // Element
 
     elms = this.builder.doc.querySelectorAll('.elm-active');
     Array.prototype.forEach.call(elms, elm => {
@@ -19388,6 +19402,7 @@ class Util {
 
     localStorage.removeItem('_snippetssidebardisplay'); //snippetsSidebarDisplay
 
+    localStorage.removeItem('_htmlview');
     localStorage.removeItem('_pasteresult'); //DON'T HAVE PROP
     //NOT USED
 
@@ -28412,9 +28427,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) {
@@ -28643,8 +28659,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;
     }
@@ -79055,6 +79076,18 @@ class Preferences {
                                 <input class="input-hidecelltool" type="checkbox" />  ${util.out('Hide Column Tool')}&nbsp;
                             </label>
 
+
+                            <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 style="display:block;margin-top:5px;margin-bottom:5px;">
                                 ${util.out('Row Tool Position')}:&nbsp;
                                 <select class="select-rowtool">
@@ -79074,18 +79107,6 @@ 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;">
                                 <input class="input-opensnippets" type="checkbox" />  ${util.out('Open snippets sidebar on start')}&nbsp;
                             </label>
@@ -79098,16 +79119,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="margin-top:14px;margin-bottom:5px;">
                                 ${util.out('Toolbar visibility')}:&nbsp;
                                 <select class="select-editingtoolbardisplay">
                                     <option value="auto">${util.out('Auto')}</option>
@@ -79118,12 +79130,30 @@ class Preferences {
                             <label style="${this.builder.isTouchSupport ? 'display:none;' : 'display:block;'}margin-top:5px;margin-bottom:5px;">
                                 ${util.out('Toolbar position')}:&nbsp;
                                 <select class="select-editingtoolbar">
+                                    <option value="topfull">${util.out('Top (Full Width)')}</option>
                                     <option value="top">${util.out('Top')}</option>
                                     <option value="left">${util.out('Left')}</option>
                                     <option value="right">${util.out('Right')}</option>
                                 </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:block;margin-top:5px;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;">
                                     ${util.out('Theme')}:&nbsp;
@@ -79182,6 +79212,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;
@@ -79247,11 +79287,12 @@ 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'; // this.setToolbarDisplay(this.builder.opts.toolbarDisplay);
+      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');
@@ -79378,6 +79419,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() {
@@ -79473,10 +79520,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;
@@ -79485,11 +79532,27 @@ 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;
       if (this.builder.themeIndex) localStorage.setItem('_theme', n);
-    }
+    } // clear/hide rte pops
+
+
+    const builderStuff = this.builder.builderStuff;
+    let rtepops = builderStuff.querySelectorAll('.is-rte-pop');
+    Array.prototype.forEach.call(rtepops, rtepop => {
+      rtepop.style.display = '';
+    });
   }
 
   setToolbar(toolbar) {
@@ -79497,10 +79560,20 @@ class Preferences {
     const builderStuff = this.builder.builderStuff;
     const contentStuff = this.builder.contentStuff;
 
-    if (toolbar === 'top') {
+    if (toolbar === 'topfull') {
+      builderStuff.setAttribute('toolbarfull', '');
       builderStuff.removeAttribute('toolbarleft', '');
       builderStuff.removeAttribute('toolbarright', '');
 
+      if (this.builder.iframe) {
+        contentStuff.removeAttribute('toolbarleft', '');
+        contentStuff.removeAttribute('toolbarright', '');
+      }
+    } else if (toolbar === 'top') {
+      builderStuff.removeAttribute('toolbarleft', '');
+      builderStuff.removeAttribute('toolbarright', '');
+      builderStuff.removeAttribute('toolbarfull', '');
+
       if (this.builder.iframe) {
         contentStuff.removeAttribute('toolbarleft', '');
         contentStuff.removeAttribute('toolbarright', '');
@@ -79508,6 +79581,7 @@ class Preferences {
     } else if (toolbar === 'left') {
       builderStuff.setAttribute('toolbarleft', '');
       builderStuff.removeAttribute('toolbarright', '');
+      builderStuff.removeAttribute('toolbarfull', '');
 
       if (this.builder.iframe) {
         contentStuff.setAttribute('toolbarleft', '');
@@ -79516,6 +79590,7 @@ class Preferences {
     } else if (toolbar === 'right') {
       builderStuff.setAttribute('toolbarright', '');
       builderStuff.removeAttribute('toolbarleft', '');
+      builderStuff.removeAttribute('toolbarfull', '');
 
       if (this.builder.iframe) {
         contentStuff.setAttribute('toolbarright', '');
@@ -80083,6 +80158,41 @@ class Rte {
     let inpZoomSlider;
 
     if (!rteTool) {
+      if (builder.plugins.length > 0) {
+        let allButtons = ['|', 'addsnippet', 'bold', 'italic', 'underline', 'formatting', 'color', 'removeformat', 'align', 'textsettings', 'createlink', 'tags', 'undo', 'redo', 'zoom', 'icon', 'image', 'list', 'font', 'formatpara', 'gridtool', 'html', 'preferences', 'more', 'left', 'center', 'right', 'full'];
+
+        const filterButtons = myArray => {
+          let newArray = myArray;
+          myArray.forEach(item => {
+            item = item.toLowerCase();
+            let result = allButtons.filter(btnName => {
+              return btnName === item;
+            });
+
+            if (result.length === 0) {
+              // a plugin
+              result = builder.plugins.filter(plugin => {
+                // check if plugin registered.
+                return plugin.name === item;
+              });
+
+              if (result.length === 0) {
+                // plugin not registered
+                newArray = newArray.filter(e => e !== item);
+              }
+            }
+          });
+          return newArray;
+        };
+
+        builder.opts.buttons = filterButtons(builder.opts.buttons);
+        builder.opts.buttonsMore = filterButtons(builder.opts.buttonsMore);
+        builder.opts.elementButtons = filterButtons(builder.opts.elementButtons);
+        builder.opts.elementButtonsMore = filterButtons(builder.opts.elementButtonsMore);
+        builder.opts.iconButtons = filterButtons(builder.opts.iconButtons);
+        builder.opts.iconButtonsMore = filterButtons(builder.opts.iconButtonsMore);
+      }
+
       let customtag_button = '';
       var customTagsHtml = '';
 
@@ -82673,7 +82783,48 @@ class Rte {
           dom.addClass(this.elementRteMoreOptions, 'deactive');
         }
       }
-    });
+    }); // Backward compatible
+
+    this.builderStuff.insertAdjacentHTML('afterbegin', `
+        <style>
+            #_cbhtml[toolbarfull] .is-rte-tool,
+            #_cbhtml[toolbarfull] .is-elementrte-tool {
+                top: 0;
+                left: 0;
+                width: 100vw;
+                align-items: center;
+                box-shadow: rgba(0, 0, 0, 0.07) -1px 1px 0px 0px;
+            }
+            #_cbhtml[toolbarfull] .is-rte-pop {
+                box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 0px 1px;
+            }
+        </style>
+        `);
+    /*
+    if(this.builder.toolbar === 'topfull') {
+        if(window.getComputedStyle(this.rteTool).getPropertyValue('left') !== '0px') {
+            this.builderStuff.insertAdjacentHTML('afterbegin', `
+            <style>
+                #_cbhtml[toolbarfull] .is-rte-tool,
+                #_cbhtml[toolbarfull] .is-elementrte-tool {
+                    top: 0;
+                    left: 0;
+                    width: 100vw;
+                    align-items: center;
+                    box-shadow: rgba(0, 0, 0, 0.07) -1px 1px 0px 0px;
+                }
+                #_cbhtml[toolbarfull] .is-rte-pop {
+                    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 0px 1px;
+                }
+            </style>
+            `);
+        }
+    }
+    */
+
+    if (this.builder.toolbarDisplay !== 'auto') {
+      this.showDefaultToolbar(); // first time
+    }
   }
 
   zoomStart() {
@@ -82920,10 +83071,12 @@ class Rte {
     let top;
     let left;
     const btnRteMore = this.rteTool.querySelectorAll('button.rte-more');
+    let btnWidth = 0;
     btnRteMore.forEach(btn => {
       if (btn.getBoundingClientRect().top > 0) {
         top = btn.getBoundingClientRect().top;
         left = btn.getBoundingClientRect().left;
+        btnWidth = btn.offsetWidth;
       }
     });
     const pop = this.rteMoreOptions;
@@ -82950,6 +83103,10 @@ class Rte {
       pop.style.left = parseFloat(this.rteTool.style.left) + this.rteTool.offsetWidth - w + adj + 'px'; //(left -(w/2)+23) + 'px';
 
       pop.style.right = 'auto';
+
+      if (this.builderStuff.hasAttribute('toolbarfull')) {
+        pop.style.left = left - w + btnWidth + 'px';
+      }
     }
   } // showElementRteMore() {
   //     const btnElementRteMore = this.elementRteTool.querySelector('button.rte-more'); 
@@ -83025,6 +83182,10 @@ class Rte {
       pop.style.left = parseFloat(this.elementRteTool.style.left) + this.elementRteTool.offsetWidth - w + adj + 'px'; //(left -(w/2)+23) + 'px';
 
       pop.style.right = 'auto';
+
+      if (this.builderStuff.hasAttribute('toolbarfull')) {
+        pop.style.left = left - w + btnElementRteMore.offsetWidth + 'px';
+      }
     }
   }
 
@@ -83172,6 +83333,60 @@ class Rte {
     dom.cleanClassSize(elm, classname); // dom.cleanUnusedSpan(elm); // will remove empty spans that makes selection changes
   }
 
+  hideAlignButtons() {
+    let btns = this.elementRteTool.querySelectorAll('button[data-align]');
+    let separator1;
+    let separator2;
+    Array.prototype.forEach.call(btns, btn => {
+      btn.style.display = 'none';
+
+      if (btn.previousElementSibling) {
+        if (btn.previousElementSibling.classList.contains('rte-separator')) {
+          separator1 = btn.previousElementSibling;
+        }
+      }
+
+      if (btn.nextElementSibling) {
+        if (btn.nextElementSibling.classList.contains('rte-separator')) {
+          separator2 = btn.nextElementSibling;
+        }
+      }
+    });
+
+    if (separator1 && separator2) {
+      separator2.style.display = 'none';
+    }
+
+    btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+
+    Array.prototype.forEach.call(btns, btn => {
+      btn.style.display = 'none';
+    });
+  }
+
+  showAlignButtons() {
+    let separators = this.elementRteTool.querySelectorAll('.rte-separator');
+    Array.prototype.forEach.call(separators, separator => {
+      separator.style.display = '';
+    });
+    let btns = this.elementRteTool.querySelectorAll('button[data-align]');
+    Array.prototype.forEach.call(btns, btn => {
+      btn.style.display = '';
+    });
+    btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+
+    Array.prototype.forEach.call(btns, btn => {
+      btn.style.display = '';
+    });
+  }
+
+  showDefaultToolbar() {
+    this.elementRteTool.style.display = 'flex';
+    this.rteTool.style.display = 'none';
+    this.hideAlignButtons();
+    this.positionToolbar();
+  }
+
   click(col) {
     const dom = this.dom;
     let elm = this.builder.inspectedElement;
@@ -83213,32 +83428,32 @@ class Rte {
       if ((elm.tagName.toLowerCase() === 'img' || dom.hasClass(elm, 'is-social') || dom.hasClass(elm, 'is-rounded-button-medium') || dom.hasClass(elm, 'cell-active')) && !dom.getSelected()) {
         if (this.elementRteTool.style.display === 'none' || this.elementRteTool.style.display === '') {
           this.elementRteTool.style.display = 'flex';
-          this.rteTool.style.display = 'none';
-          let btns = this.elementRteTool.querySelectorAll('button[data-align]');
-          Array.prototype.forEach.call(btns, btn => {
-            btn.style.display = '';
-          });
-          btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+          this.rteTool.style.display = 'none'; // let btns = this.elementRteTool.querySelectorAll('button[data-align]'); 
+          // Array.prototype.forEach.call(btns, (btn) => {
+          //     btn.style.display = '';
+          // });
+          // btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+          // Array.prototype.forEach.call(btns, (btn) => {
+          //     btn.style.display = '';
+          // });
 
-          Array.prototype.forEach.call(btns, btn => {
-            btn.style.display = '';
-          });
+          this.showAlignButtons();
           this.positionToolbar();
         }
       } else if (dom.hasClass(elm, 'spacer') || elm.tagName.toLowerCase() === 'video' || dom.hasClass(elm, 'ovl') || col.getAttribute('data-html')) {
         //|| col===elm
         if (this.elementRteTool.style.display === 'none' || this.elementRteTool.style.display === '') {
           this.elementRteTool.style.display = 'flex';
-          this.rteTool.style.display = 'none';
-          let btns = this.elementRteTool.querySelectorAll('button[data-align]');
-          Array.prototype.forEach.call(btns, btn => {
-            btn.style.display = 'none';
-          });
-          btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+          this.rteTool.style.display = 'none'; // let btns = this.elementRteTool.querySelectorAll('button[data-align]'); 
+          // Array.prototype.forEach.call(btns, (btn) => {
+          //     btn.style.display = 'none';
+          // });
+          // btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+          // Array.prototype.forEach.call(btns, (btn) => {
+          //     btn.style.display = 'none';
+          // });
 
-          Array.prototype.forEach.call(btns, btn => {
-            btn.style.display = 'none';
-          });
+          this.hideAlignButtons();
           this.positionToolbar();
         }
       } else if (dom.hasClass(elm, 'icon')) {
@@ -83261,16 +83476,16 @@ class Rte {
         } else {
           if (this.elementRteTool.style.display === 'none' || this.elementRteTool.style.display === '') {
             this.elementRteTool.style.display = 'flex';
-            this.rteTool.style.display = 'none';
-            let btns = this.elementRteTool.querySelectorAll('button[data-align]');
-            Array.prototype.forEach.call(btns, btn => {
-              btn.style.display = '';
-            });
-            btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+            this.rteTool.style.display = 'none'; // let btns = this.elementRteTool.querySelectorAll('button[data-align]'); 
+            // Array.prototype.forEach.call(btns, (btn) => {
+            //     btn.style.display = '';
+            // });
+            // btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+            // Array.prototype.forEach.call(btns, (btn) => {
+            //     btn.style.display = '';
+            // });
 
-            Array.prototype.forEach.call(btns, btn => {
-              btn.style.display = '';
-            });
+            this.showAlignButtons();
             this.positionToolbar();
           }
         }
@@ -83278,16 +83493,16 @@ class Rte {
     } else {
       if (this.elementRteTool.style.display === 'none' || this.elementRteTool.style.display === '') {
         this.elementRteTool.style.display = 'flex';
-        this.rteTool.style.display = 'none';
-        let btns = this.elementRteTool.querySelectorAll('button[data-align]');
-        Array.prototype.forEach.call(btns, btn => {
-          btn.style.display = 'none';
-        });
-        btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+        this.rteTool.style.display = 'none'; // let btns = this.elementRteTool.querySelectorAll('button[data-align]'); 
+        // Array.prototype.forEach.call(btns, (btn) => {
+        //     btn.style.display = 'none';
+        // });
+        // btns = this.elementRteMoreOptions.querySelectorAll('button[data-align]'); //new
+        // Array.prototype.forEach.call(btns, (btn) => {
+        //     btn.style.display = 'none';
+        // });
 
-        Array.prototype.forEach.call(btns, btn => {
-          btn.style.display = 'none';
-        });
+        this.hideAlignButtons();
         this.positionToolbar();
       }
     }
@@ -88454,6 +88669,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 () { }, 
@@ -89318,6 +89534,10 @@ class ContentBuilder {
             // Additional (to prevent lost focus)
             util.clearActiveCell();
             util.clearControls();
+
+            if (this.toolbarDisplay !== 'auto') {
+              this.rte.showDefaultToolbar();
+            }
           }
         }
 
@@ -103479,6 +103699,7 @@ class ContentBox {
       useButtonPlugin: this.settings.useButtonPlugin,
       enableDragResize: this.settings.enableDragResize,
       simpleTextSettings: this.settings.simpleTextSettings,
+      shortenHTML: this.settings.shortenHTML,
       zoom: this.settings.zoom,
       onZoomStart: () => {
         const wrapper = this.wrapperEl; // wrapper.style.transition = 'all ease 0.1s';