@innovastudio/contentbuilder 1.0.87 → 1.0.90

package/public/contentbuilder/contentbuilder.esm.js

@@ -7056,6 +7056,88 @@ class Dom {
     }
 
     return value;
+  } // execCommand replacement => for general, apply class to current element
+
+
+  execCommandClass(newClassName, classList, currentElement = true) {
+    const selection = this.getSelection();
+    if (!selection) return;
+    const anchorNode = selection.anchorNode;
+
+    if (anchorNode) {
+      const container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
+      const sameSelection = container && container.innerText === selection.toString();
+      let multi = false;
+      var selectedNodes = [];
+      var sel = rangy.getSelection();
+
+      for (var i = 0; i < sel.rangeCount; ++i) {
+        selectedNodes = selectedNodes.concat(sel.getRangeAt(i).getNodes());
+      }
+
+      const blockElms = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'pre'];
+      selectedNodes.forEach(item => {
+        if (item.tagName) {
+          const tagName = item.tagName.toLowerCase();
+
+          if (blockElms.indexOf(tagName) !== -1) {
+            multi = true;
+
+            for (let i = 0; i < Object.keys(classList).length; i++) {
+              let className = Object.values(classList)[i];
+              this.removeClass(item, className);
+            }
+
+            if (newClassName !== '') this.addClass(item, newClassName);
+            this.cleanChildrenClass(item, classList);
+            this.cleanUnusedSpan(item); // REVIEW
+          }
+        }
+      });
+      if (multi) return;
+
+      if (currentElement) {
+        this.updateSelectionClass(newClassName, classList, container);
+      } else {
+        if (sameSelection || selection.toString().trim() === '') {
+          this.updateSelectionClass(newClassName, classList, container);
+        }
+      }
+    }
+  }
+
+  updateSelectionClass(newClassName, classList, container) {
+    for (let i = 0; i < Object.keys(classList).length; i++) {
+      let className = Object.values(classList)[i];
+      this.removeClass(container, className);
+    }
+
+    if (newClassName !== '') this.addClass(container, newClassName);
+    this.cleanChildrenClass(container, classList);
+    this.cleanUnusedSpan(container); // REVIEW
+
+    return container;
+  }
+
+  cleanChildrenClass(span, classList) {
+    if (!span.hasChildNodes()) {
+      return;
+    }
+
+    Array.from(span.children).map(element => {
+      for (let i = 0; i < Object.keys(classList).length; i++) {
+        let className = Object.values(classList)[i];
+        this.removeClass(element, className);
+      }
+    }); // Deeper childrens
+
+    const cleanChildrenChildren = Array.from(span.children).map(element => {
+      return this.cleanChildrenClass(element, classList);
+    });
+
+    if (!cleanChildrenChildren || cleanChildrenChildren.length <= 0) {
+      return;
+    }
   } // execCommand replacement => for CLASS
 
 
@@ -7577,6 +7659,18 @@ class Dom {
     if (!cleanChildrenChildren || cleanChildrenChildren.length <= 0) {
       return;
     }
+  }
+
+  addCssClass(elm, className, classes) {
+    this.removeCssClasses(elm, classes);
+    this.addClass(elm, className);
+  }
+
+  removeCssClasses(elm, classes) {
+    for (let i = 0; i < Object.keys(classes).length; i++) {
+      const item = Object.values(classes)[i];
+      this.removeClass(elm, item);
+    }
   } // Clean HTML stuff
 
 
@@ -13056,6 +13150,7 @@ class HtmlUtil {
     const util = this.builder.util;
     const builderStuff = this.builder.builderStuff;
     const viewhtmlnormal = builderStuff.querySelector('.viewhtmlnormal');
+    util.showModal(viewhtmlnormal, true, null, false);
     let iframe = viewhtmlnormal.querySelector('iframe');
     iframe.outerHTML = '<iframe id="ifrHtml" style="width:100%;height:100%;border: none;" src="about:blank"></iframe>'; //clear
 
@@ -13064,7 +13159,6 @@ class HtmlUtil {
     doc.write(this.getIframeHtml()); // use the same html as viewhtmllarger
 
     doc.close();
-    util.showModal(viewhtmlnormal, true, null, false);
   }
 
   viewHtmlLarger() {
@@ -13300,6 +13394,7 @@ class HtmlUtil {
         elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.textDecoration.normal}`);
         Array.prototype.forEach.call(elmNormals, elm => {
           let decor = false;
+          if (elm.closest('a')) return;
 
           if (elm.closest(`.${this.builder.cssClasses.textDecoration.underline},.${this.builder.cssClasses.textDecoration.linethrough}`)) {
             decor = true;
@@ -49891,15 +49986,54 @@ class ColumnTool {
                         <div id="divCellContent" class="is-tab-content" data-group="cellsettings">
 
                             <div style="padding-bottom:3px;">${util.out('Padding')}:</div>
-                            <div class="div-content-padding">
-                                <button title="0" class="input-cell-padding" data-command="0">0</button>
-                                <button title="10" class="input-cell-padding" data-command="10">10</button>
-                                <button title="20" class="input-cell-padding" data-command="20">20</button>
-                                <button title="30" class="input-cell-padding" data-command="30">30</button>
-                                <button title="40" class="input-cell-padding" data-command="40">40</button>
-                                <button title="50" class="input-cell-padding" data-command="50">50</button>
-                                <button title="60" class="input-cell-padding" data-command="60">60</button>
-                                <button title="${util.out('Clear')}" class="input-cell-padding" data-command=""><svg class="is-icon-flex" style="flex:none;width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+
+                            <div class="div-content-padding-pos" style="align-items:center;${this.builder.useCssClasses ? '' : 'display:none'}">
+                                <div style="width:130px">
+                                    <div style="display: flex;justify-content: center;">
+                                        <button title="${util.out('Top')}" class="input-cell-padding-pos on" data-command="top">${util.out('Top')}</button>
+                                    </div>
+                                    <div style="display: flex;justify-content: center;">
+                                        <button title="${util.out('Left')}" class="input-cell-padding-pos on" data-command="left">${util.out('Left')}</button>
+                                        <button title="${util.out('Right')}" class="input-cell-padding-pos on" data-command="right">${util.out('Right')}</button>
+                                    </div>
+                                    <div style="display: flex;justify-content: center;">
+                                        <button title="${util.out('Bottom')}" class="input-cell-padding-pos on" data-command="bottom">${util.out('Bottom')}</button>
+                                    </div>
+                                </div>
+                                <button title="${util.out('All')}" class="input-cell-padding-pos" data-command="all">${util.out('All')}</button>
+                                <button title="x" class="input-cell-padding-pos" data-command="x" style="width:50px">x</button>
+                                <button title="y" class="input-cell-padding-pos" data-command="y" style="width:50px">y</button>
+                            </div>
+
+                            <div class="div-content-padding" style="flex-flow:wrap;margin-top:7px">
+                                <div style="display:flex;flex-flow:wrap;${this.builder.useCssClasses ? 'display:none' : ''}">
+                                    <button title="0" class="input-cell-padding" data-command="0">0</button>
+                                    <button title="10" class="input-cell-padding" data-command="10">10</button>
+                                    <button title="20" class="input-cell-padding" data-command="20">20</button>
+                                    <button title="30" class="input-cell-padding" data-command="30">30</button>
+                                    <button title="40" class="input-cell-padding" data-command="40">40</button>
+                                    <button title="50" class="input-cell-padding" data-command="50">50</button>
+                                    <button title="60" class="input-cell-padding" data-command="60">60</button>
+                                </div>
+
+                                <div style="display:flex;flex-flow:wrap;${this.builder.useCssClasses ? '' : 'display:none'}">
+                                    <button title="0" class="input-cell-padding" data-command="0">0</button>
+                                    <button title="20" class="input-cell-padding" data-command="1">10</button>
+                                    <button title="40" class="input-cell-padding" data-command="2">20</button>
+                                    <button title="60" class="input-cell-padding" data-command="3">30</button>
+                                    <button title="60" class="input-cell-padding" data-command="4">40</button>
+                                    <button title="60" class="input-cell-padding" data-command="5">50</button>
+                                    <button title="60" class="input-cell-padding" data-command="6">60</button>
+                                    <button title="60" class="input-cell-padding" data-command="7">70</button>
+                                    <button title="60" class="input-cell-padding" data-command="8">80</button>
+                                    <button title="60" class="input-cell-padding" data-command="9">90</button>
+                                    <button title="60" class="input-cell-padding" data-command="10">100</button>
+                                    <button title="60" class="input-cell-padding" data-command="11">110</button>
+                                    <button title="60" class="input-cell-padding" data-command="12">120</button>
+                                    <button title="60" class="input-cell-padding" data-command="14">140</button>
+                                    <button title="60" class="input-cell-padding" data-command="16">160</button>
+                                    <button title="${util.out('Clear')}" class="input-cell-padding" data-command=""><svg class="is-icon-flex" style="flex:none;width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                                </div>
                             </div>
 
                             <div style="padding-top:20px;padding-bottom:3px;">${util.out('Height')}:</div>
@@ -49915,22 +50049,28 @@ class ColumnTool {
                             </div>
 
                             <div style="padding-top:20px;padding-bottom:3px;">${util.out('Content Alignment')}:</div>
-                            <div class="div-content-position">
-                                <button class="cmd-content-pos" data-pos="topleft" title="${util.out('Top Left')}" type="button" style=""><svg class="is-icon-flex" style="transform: rotate(315deg);"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
-                                <button class="cmd-content-pos" data-pos="topcenter" title="${util.out('Top Center')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
-                                <button class="cmd-content-pos" data-pos="topright" topright="${util.out('Top Right')}" type="button"><svg class="is-icon-flex" style="transform: rotate(45deg);"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
-                            </div>
-                            <div class="div-content-position">
-                                <button class="cmd-content-pos" data-pos="centerleft" title="${util.out('Center Left')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-left"></use></svg></button>
-                                <button class="cmd-content-pos" data-pos="center" title="${util.out('Center')}" type="button"><svg class="is-icon-flex" style="width:6px;height:6px;"><use xlink:href="#ion-android-contract"></use></svg></button>
-                                <button class="cmd-content-pos" data-pos="centerright" title="${util.out('Center Right')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-right"></use></svg></button>
-                            </div>
-                            <div class="div-content-position">
-                                <button class="cmd-content-pos" data-pos="bottomleft" title="${util.out('Bottom Left')}" type="button" style=";"><svg class="is-icon-flex" style="transform: rotate(45deg);"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
-                                <button class="cmd-content-pos" data-pos="bottomcenter" title="${util.out('Bottom Center')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
-                                <button class="cmd-content-pos" data-pos="bottomright" title="${util.out('Bottom Right')}" type="button"><svg class="is-icon-flex" style="transform: rotate(315deg);"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
+                            <div style="display:flex;align-items: flex-end;">
+                                <div style="width:120px">
+                                    <div class="div-content-position">
+                                        <button class="cmd-content-pos" data-pos="topleft" title="${util.out('Top Left')}" type="button" style=""><svg class="is-icon-flex" style="transform: rotate(315deg);"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
+                                        <button class="cmd-content-pos" data-pos="topcenter" title="${util.out('Top Center')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
+                                        <button class="cmd-content-pos" data-pos="topright" topright="${util.out('Top Right')}" type="button"><svg class="is-icon-flex" style="transform: rotate(45deg);"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
+                                    </div>
+                                    <div class="div-content-position">
+                                        <button class="cmd-content-pos" data-pos="centerleft" title="${util.out('Center Left')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-left"></use></svg></button>
+                                        <button class="cmd-content-pos" data-pos="center" title="${util.out('Center')}" type="button"><svg class="is-icon-flex" style="width:6px;height:6px;"><use xlink:href="#ion-android-contract"></use></svg></button>
+                                        <button class="cmd-content-pos" data-pos="centerright" title="${util.out('Center Right')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-right"></use></svg></button>
+                                    </div>
+                                    <div class="div-content-position">
+                                        <button class="cmd-content-pos" data-pos="bottomleft" title="${util.out('Bottom Left')}" type="button" style=";"><svg class="is-icon-flex" style="transform: rotate(45deg);"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
+                                        <button class="cmd-content-pos" data-pos="bottomcenter" title="${util.out('Bottom Center')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
+                                        <button class="cmd-content-pos" data-pos="bottomright" title="${util.out('Bottom Right')}" type="button"><svg class="is-icon-flex" style="transform: rotate(315deg);"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
+                                    </div>
+                                </div>
+                                <div>
+                                    <button title="${util.out('Clear')}" class="cmd-content-pos" data-pos=""><svg class="is-icon-flex" style="flex:none;width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                                </div>
                             </div>
-
                         </div>
 
                         <div id="divCellClick" class="is-tab-content" data-group="cellsettings">
@@ -50513,6 +50653,36 @@ class ColumnTool {
           this.builder.opts.onChange();
         });
       });
+      elms = cellSettings.querySelectorAll('.input-cell-padding-pos');
+      Array.prototype.forEach.call(elms, elm => {
+        dom$l.addEventListener(elm, 'click', () => {
+          let val = elm.getAttribute('data-command');
+          let ns = this.cellSettings.querySelectorAll('.input-cell-padding-pos');
+          Array.prototype.forEach.call(ns, n => {
+            dom$l.removeClass(n, 'on');
+          });
+
+          if (val === 'all') {
+            dom$l.addClass(this.cellSettings.querySelector('button[data-command="top"]'), 'on');
+            dom$l.addClass(this.cellSettings.querySelector('button[data-command="left"]'), 'on');
+            dom$l.addClass(this.cellSettings.querySelector('button[data-command="right"]'), 'on');
+            dom$l.addClass(this.cellSettings.querySelector('button[data-command="bottom"]'), 'on');
+          } else if (val === 'x') {
+            dom$l.addClass(this.cellSettings.querySelector('button[data-command="left"]'), 'on');
+            dom$l.addClass(this.cellSettings.querySelector('button[data-command="right"]'), 'on');
+          } else if (val === 'y') {
+            dom$l.addClass(this.cellSettings.querySelector('button[data-command="top"]'), 'on');
+            dom$l.addClass(this.cellSettings.querySelector('button[data-command="bottom"]'), 'on');
+          } else {
+            dom$l.addClass(elm, 'on');
+          }
+
+          let btns = this.cellSettings.querySelectorAll('.input-cell-padding');
+          Array.prototype.forEach.call(btns, btn => {
+            dom$l.removeClass(btn, 'on');
+          });
+        });
+      });
       elms = cellSettings.querySelectorAll('.input-cell-padding');
       Array.prototype.forEach.call(elms, elm => {
         dom$l.addEventListener(elm, 'click', () => {
@@ -50523,17 +50693,180 @@ class ColumnTool {
           Array.prototype.forEach.call(ns, n => {
             dom$l.removeClass(n, 'on');
           });
-          dom$l.removeClass(cell, 'padding-0');
-          dom$l.removeClass(cell, 'padding-10');
-          dom$l.removeClass(cell, 'padding-20');
-          dom$l.removeClass(cell, 'padding-30');
-          dom$l.removeClass(cell, 'padding-40');
-          dom$l.removeClass(cell, 'padding-50');
-          dom$l.removeClass(cell, 'padding-60');
-
-          if (val !== '') {
-            dom$l.addClass(cell, 'padding-' + val);
+
+          if (this.builder.useCssClasses) {
+            // Clean old classes
+            dom$l.removeClass(cell, 'padding-0');
+            dom$l.removeClass(cell, 'padding-10');
+            dom$l.removeClass(cell, 'padding-20');
+            dom$l.removeClass(cell, 'padding-30');
+            dom$l.removeClass(cell, 'padding-40');
+            dom$l.removeClass(cell, 'padding-50');
+            dom$l.removeClass(cell, 'padding-60');
+            let command;
+            let btns = this.cellSettings.querySelectorAll('.input-cell-padding-pos.on');
+
+            if (btns.length === 2) {
+              // x or y selected
+              command = btns[0].getAttribute('data-command');
+
+              if (command === 'left') {
+                // x selected
+                let classes = this.builder.cssClasses.padding.left;
+
+                for (let i = 0; i < Object.keys(classes).length; i++) {
+                  let className = Object.values(classes)[i];
+                  dom$l.removeClass(cell, className);
+                }
+
+                classes = this.builder.cssClasses.padding.right;
+
+                for (let i = 0; i < Object.keys(classes).length; i++) {
+                  let className = Object.values(classes)[i];
+                  dom$l.removeClass(cell, className);
+                }
+
+                classes = this.builder.cssClasses.padding.x;
+
+                for (let i = 0; i < Object.keys(classes).length; i++) {
+                  let className = Object.values(classes)[i];
+                  dom$l.removeClass(cell, className);
+                }
+
+                if (val !== '') dom$l.addClass(cell, this.builder.cssClasses.padding.x[`px_${val}`]);
+              } else {
+                // y selected
+                let classes = this.builder.cssClasses.padding.top;
+
+                for (let i = 0; i < Object.keys(classes).length; i++) {
+                  let className = Object.values(classes)[i];
+                  dom$l.removeClass(cell, className);
+                }
+
+                classes = this.builder.cssClasses.padding.bottom;
+
+                for (let i = 0; i < Object.keys(classes).length; i++) {
+                  let className = Object.values(classes)[i];
+                  dom$l.removeClass(cell, className);
+                }
+
+                classes = this.builder.cssClasses.padding.y;
+
+                for (let i = 0; i < Object.keys(classes).length; i++) {
+                  let className = Object.values(classes)[i];
+                  dom$l.removeClass(cell, className);
+                }
+
+                if (val !== '') dom$l.addClass(cell, this.builder.cssClasses.padding.y[`py_${val}`]);
+              }
+            } else if (btns.length === 4) {
+              // all selected
+              let classes = this.builder.cssClasses.padding.top;
+
+              for (let i = 0; i < Object.keys(classes).length; i++) {
+                let className = Object.values(classes)[i];
+                dom$l.removeClass(cell, className);
+              }
+
+              classes = this.builder.cssClasses.padding.bottom;
+
+              for (let i = 0; i < Object.keys(classes).length; i++) {
+                let className = Object.values(classes)[i];
+                dom$l.removeClass(cell, className);
+              }
+
+              classes = this.builder.cssClasses.padding.left;
+
+              for (let i = 0; i < Object.keys(classes).length; i++) {
+                let className = Object.values(classes)[i];
+                dom$l.removeClass(cell, className);
+              }
+
+              classes = this.builder.cssClasses.padding.right;
+
+              for (let i = 0; i < Object.keys(classes).length; i++) {
+                let className = Object.values(classes)[i];
+                dom$l.removeClass(cell, className);
+              }
+
+              classes = this.builder.cssClasses.padding.all;
+
+              for (let i = 0; i < Object.keys(classes).length; i++) {
+                let className = Object.values(classes)[i];
+                dom$l.removeClass(cell, className);
+              }
+
+              classes = this.builder.cssClasses.padding.x;
+
+              for (let i = 0; i < Object.keys(classes).length; i++) {
+                let className = Object.values(classes)[i];
+                dom$l.removeClass(cell, className);
+              }
+
+              classes = this.builder.cssClasses.padding.y;
+
+              for (let i = 0; i < Object.keys(classes).length; i++) {
+                let className = Object.values(classes)[i];
+                dom$l.removeClass(cell, className);
+              }
+
+              if (val !== '') dom$l.addClass(cell, this.builder.cssClasses.padding.all[`p_${val}`]);
+            } else {
+              command = btns[0].getAttribute('data-command');
+
+              if (command === 'top') {
+                let classes = this.builder.cssClasses.padding.top;
+
+                for (let i = 0; i < Object.keys(classes).length; i++) {
+                  let className = Object.values(classes)[i];
+                  dom$l.removeClass(cell, className);
+                }
+
+                if (val !== '') dom$l.addClass(cell, this.builder.cssClasses.padding.top[`pt_${val}`]);
+              } else if (command === 'bottom') {
+                let classes = this.builder.cssClasses.padding.bottom;
+
+                for (let i = 0; i < Object.keys(classes).length; i++) {
+                  let className = Object.values(classes)[i];
+                  dom$l.removeClass(cell, className);
+                }
+
+                if (val !== '') dom$l.addClass(cell, this.builder.cssClasses.padding.bottom[`pb_${val}`]);
+              } else if (command === 'left') {
+                let classes = this.builder.cssClasses.padding.left;
+
+                for (let i = 0; i < Object.keys(classes).length; i++) {
+                  let className = Object.values(classes)[i];
+                  dom$l.removeClass(cell, className);
+                }
+
+                if (val !== '') dom$l.addClass(cell, this.builder.cssClasses.padding.left[`pl_${val}`]);
+              } else if (command === 'right') {
+                let classes = this.builder.cssClasses.padding.right;
+
+                for (let i = 0; i < Object.keys(classes).length; i++) {
+                  let className = Object.values(classes)[i];
+                  dom$l.removeClass(cell, className);
+                }
+
+                if (val !== '') dom$l.addClass(cell, this.builder.cssClasses.padding.right[`pr_${val}`]);
+              }
+            }
+
             dom$l.addClass(elm, 'on');
+          } else {
+            dom$l.removeClass(cell, 'padding-0');
+            dom$l.removeClass(cell, 'padding-10');
+            dom$l.removeClass(cell, 'padding-20');
+            dom$l.removeClass(cell, 'padding-30');
+            dom$l.removeClass(cell, 'padding-40');
+            dom$l.removeClass(cell, 'padding-50');
+            dom$l.removeClass(cell, 'padding-60');
+
+            if (val !== '') {
+              dom$l.addClass(cell, 'padding-' + val);
+              dom$l.addClass(elm, 'on');
+            }
           } //Trigger Change event
 
 
@@ -50644,65 +50977,152 @@ class ColumnTool {
           this.builder.uo.saveForUndo();
           let val = elm.getAttribute('data-pos');
           let cell = util.cellSelected();
-          cell.style.display = 'flex';
-          cell.style.flexDirection = 'column';
-          let ns = this.cellSettings.querySelectorAll('.cmd-content-pos');
-          Array.prototype.forEach.call(ns, n => {
+          const btns = this.cellSettings.querySelectorAll('.cmd-content-pos');
+          Array.prototype.forEach.call(btns, n => {
             dom$l.removeClass(n, 'on');
           });
 
-          if (val === 'topleft') {
-            cell.style.justifyContent = 'flex-start';
-            cell.style.alignItems = 'flex-start';
-            dom$l.addClass(elm, 'on');
-          }
+          if (this.builder.useCssClasses) {
+            if (val !== '') {
+              let classes = this.builder.cssClasses.display;
+              dom$l.addCssClass(cell, classes.flex, classes);
+              classes = this.builder.cssClasses.flexDirection;
+              dom$l.addCssClass(cell, classes.column, classes);
+
+              if (val === 'topleft') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.start, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.start, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'topcenter') {
-            cell.style.justifyContent = 'flex-start';
-            cell.style.alignItems = 'center';
-            dom$l.addClass(elm, 'on');
-          }
+              if (val === 'topcenter') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.start, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.center, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'topright') {
-            cell.style.justifyContent = 'flex-start';
-            cell.style.alignItems = 'flex-end';
-            dom$l.addClass(elm, 'on');
-          }
+              if (val === 'topright') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.start, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.end, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'centerleft') {
-            cell.style.justifyContent = 'center';
-            cell.style.alignItems = 'flex-start';
-            dom$l.addClass(elm, 'on');
-          }
+              if (val === 'centerleft') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.center, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.start, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'center') {
-            cell.style.justifyContent = 'center';
-            cell.style.alignItems = 'center';
-            dom$l.addClass(elm, 'on');
-          }
+              if (val === 'center') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.center, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.center, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'centerright') {
-            cell.style.justifyContent = 'center';
-            cell.style.alignItems = 'flex-end';
-            dom$l.addClass(elm, 'on');
-          }
+              if (val === 'centerright') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.center, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.end, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'bottomleft') {
-            cell.style.justifyContent = 'flex-end';
-            cell.style.alignItems = 'flex-start';
-            dom$l.addClass(elm, 'on');
-          }
+              if (val === 'bottomleft') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.end, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.start, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'bottomcenter') {
-            cell.style.justifyContent = 'flex-end';
-            cell.style.alignItems = 'center';
-            dom$l.addClass(elm, 'on');
-          }
+              if (val === 'bottomcenter') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.end, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.center, classes);
+                dom$l.addClass(elm, 'on');
+              }
 
-          if (val === 'bottomright') {
-            cell.style.justifyContent = 'flex-end';
-            cell.style.alignItems = 'flex-end';
-            dom$l.addClass(elm, 'on');
+              if (val === 'bottomright') {
+                let classes = this.builder.cssClasses.justifyContent;
+                dom$l.addCssClass(cell, classes.end, classes);
+                classes = this.builder.cssClasses.alignItems;
+                dom$l.addCssClass(cell, classes.end, classes);
+                dom$l.addClass(elm, 'on');
+              }
+            } else {
+              dom$l.removeCssClasses(cell, this.builder.cssClasses.display);
+              dom$l.removeCssClasses(cell, this.builder.cssClasses.flexDirection);
+              dom$l.removeCssClasses(cell, this.builder.cssClasses.justifyContent);
+              dom$l.removeCssClasses(cell, this.builder.cssClasses.alignItems);
+            }
+          } else {
+            cell.style.display = 'flex';
+            cell.style.flexDirection = 'column';
+
+            if (val === 'topleft') {
+              cell.style.justifyContent = 'flex-start';
+              cell.style.alignItems = 'flex-start';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'topcenter') {
+              cell.style.justifyContent = 'flex-start';
+              cell.style.alignItems = 'center';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'topright') {
+              cell.style.justifyContent = 'flex-start';
+              cell.style.alignItems = 'flex-end';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'centerleft') {
+              cell.style.justifyContent = 'center';
+              cell.style.alignItems = 'flex-start';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'center') {
+              cell.style.justifyContent = 'center';
+              cell.style.alignItems = 'center';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'centerright') {
+              cell.style.justifyContent = 'center';
+              cell.style.alignItems = 'flex-end';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'bottomleft') {
+              cell.style.justifyContent = 'flex-end';
+              cell.style.alignItems = 'flex-start';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'bottomcenter') {
+              cell.style.justifyContent = 'flex-end';
+              cell.style.alignItems = 'center';
+              dom$l.addClass(elm, 'on');
+            }
+
+            if (val === 'bottomright') {
+              cell.style.justifyContent = 'flex-end';
+              cell.style.alignItems = 'flex-end';
+              dom$l.addClass(elm, 'on');
+            }
           } //Trigger Change event
 
 
@@ -57269,6 +57689,62 @@ class Preferences {
 
 }
 
+class ColorClassPicker {
+  constructor(opts = {}) {
+    let defaults = {
+      onPick: function () {},
+      color: '',
+      colors: ['bg-gray-50', 'bg-gray-100', 'bg-gray-200', 'bg-gray-300', 'bg-gray-400', 'bg-gray-500', 'bg-gray-600', 'bg-gray-700', 'bg-gray-800', 'bg-gray-900', 'bg-red-50', 'bg-red-100', 'bg-red-200', 'bg-red-300', 'bg-red-400', 'bg-red-500', 'bg-red-600', 'bg-red-700', 'bg-red-800', 'bg-red-900', 'bg-orange-50', 'bg-orange-100', 'bg-orange-200', 'bg-orange-300', 'bg-orange-400', 'bg-orange-500', 'bg-orange-600', 'bg-orange-700', 'bg-orange-800', 'bg-orange-900', 'bg-amber-50', 'bg-amber-100', 'bg-amber-200', 'bg-amber-300', 'bg-amber-400', 'bg-amber-500', 'bg-amber-600', 'bg-amber-700', 'bg-amber-800', 'bg-amber-900', 'bg-yellow-50', 'bg-yellow-100', 'bg-yellow-200', 'bg-yellow-300', 'bg-yellow-400', 'bg-yellow-500', 'bg-yellow-600', 'bg-yellow-700', 'bg-yellow-800', 'bg-yellow-900', 'bg-lime-50', 'bg-lime-100', 'bg-lime-200', 'bg-lime-300', 'bg-lime-400', 'bg-lime-500', 'bg-lime-600', 'bg-lime-700', 'bg-lime-800', 'bg-lime-900', 'bg-green-50', 'bg-green-100', 'bg-green-200', 'bg-green-300', 'bg-green-400', 'bg-green-500', 'bg-green-600', 'bg-green-700', 'bg-green-800', 'bg-green-900', 'bg-emerald-50', 'bg-emerald-100', 'bg-emerald-200', 'bg-emerald-300', 'bg-emerald-400', 'bg-emerald-500', 'bg-emerald-600', 'bg-emerald-700', 'bg-emerald-800', 'bg-emerald-900', 'bg-teal-50', 'bg-teal-100', 'bg-teal-200', 'bg-teal-300', 'bg-teal-400', 'bg-teal-500', 'bg-teal-600', 'bg-teal-700', 'bg-teal-800', 'bg-teal-900', 'bg-cyan-50', 'bg-cyan-100', 'bg-cyan-200', 'bg-cyan-300', 'bg-cyan-400', 'bg-cyan-500', 'bg-cyan-600', 'bg-cyan-700', 'bg-cyan-800', 'bg-cyan-900', 'bg-sky-50', 'bg-sky-100', 'bg-sky-200', 'bg-sky-300', 'bg-sky-400', 'bg-sky-500', 'bg-sky-600', 'bg-sky-700', 'bg-sky-800', 'bg-sky-900', 'bg-blue-50', 'bg-blue-100', 'bg-blue-200', 'bg-blue-300', 'bg-blue-400', 'bg-blue-500', 'bg-blue-600', 'bg-blue-700', 'bg-blue-800', 'bg-blue-900', 'bg-indigo-50', 'bg-indigo-100', 'bg-indigo-200', 'bg-indigo-300', 'bg-indigo-400', 'bg-indigo-500', 'bg-indigo-600', 'bg-indigo-700', 'bg-indigo-800', 'bg-indigo-900', 'bg-violet-50', 'bg-violet-100', 'bg-violet-200', 'bg-violet-300', 'bg-violet-400', 'bg-violet-500', 'bg-violet-600', 'bg-violet-700', 'bg-violet-800', 'bg-violet-900', 'bg-purple-50', 'bg-purple-100', 'bg-purple-200', 'bg-purple-300', 'bg-purple-400', 'bg-purple-500', 'bg-purple-600', 'bg-purple-700', 'bg-purple-800', 'bg-purple-900', 'bg-fuchsia-50', 'bg-fuchsia-100', 'bg-fuchsia-200', 'bg-fuchsia-300', 'bg-fuchsia-400', 'bg-fuchsia-500', 'bg-fuchsia-600', 'bg-fuchsia-700', 'bg-fuchsia-800', 'bg-fuchsia-900', 'bg-pink-50', 'bg-pink-100', 'bg-pink-200', 'bg-pink-300', 'bg-pink-400', 'bg-pink-500', 'bg-pink-600', 'bg-pink-700', 'bg-pink-800', 'bg-pink-900', 'bg-rose-50', 'bg-rose-100', 'bg-rose-200', 'bg-rose-300', 'bg-rose-400', 'bg-rose-500', 'bg-rose-600', 'bg-rose-700', 'bg-rose-800', 'bg-rose-900'],
+      renderOn: '',
+      stuffPlacement: '#_cbhtml',
+      lang: []
+    };
+    this.opts = Object.assign(this, defaults, opts);
+    let builderStuff = document.querySelector(this.opts.stuffPlacement);
+
+    if (!builderStuff) {
+      builderStuff = document.createElement('div');
+      builderStuff.id = '_cbhtml';
+      builderStuff.className = 'is-ui';
+      document.body.appendChild(builderStuff);
+    }
+
+    this.builderStuff = builderStuff;
+    const modal = new Modal({
+      stuffPlacement: this.opts.stuffPlacement
+    });
+    this.modal = modal;
+    let pickcolor = document.querySelector('.pickcolorclass');
+
+    if (!pickcolor) {
+      let html = `<div class="is-modal pickcolorclass">
+                <div class="is-modal-content" style="padding: 12px;max-width:1000px;">
+                    <div class="is-modal-bar is-draggable"></div>
+                    <div>
+                        <div class="color-list clearfix"></div>
+
+                    </div>
+                </div>
+            </div>`;
+      builderStuff.insertAdjacentHTML('beforeend', html);
+      pickcolor = document.querySelector('.pickcolorclass');
+    }
+
+    const divList = pickcolor.querySelector('.color-list');
+    let s = '';
+
+    for (let i = 0; i < this.opts.colors.length; i++) {
+      let className = this.opts.colors[i];
+      s += `<div class="${className}" style="width:60px;height:30px;"></div>`;
+    }
+
+    s = `<div style="display:flex;flex-flow:wrap;width:450px;height:300px;flex-direction:column;">${s}</div>`;
+    divList.innerHTML = s;
+    this.modal.show(pickcolor, false, null, false);
+  }
+
+}
+
 const dom$5 = new Dom();
 
 class Rte {
@@ -59318,103 +59794,168 @@ class Rte {
         let num = btn.getAttribute('data-value');
         util.restoreSelection(); //a must
 
-        let elm;
+        this.builder.uo.saveForUndo();
 
-        try {
-          let curr;
+        if (this.builder.useCssClasses) {
+          const selection = dom$5.getSelection();
+          if (!selection) return;
+          const anchorNode = selection.anchorNode;
+          let container;
 
-          if (window.getSelection) {
-            curr = window.getSelection().getRangeAt(0).commonAncestorContainer;
+          if (anchorNode) {
+            container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
+          }
 
-            if (curr.nodeType === 3) {
-              //text node
-              elm = curr.parentNode;
-            } else {
-              elm = curr;
+          if (!container) return; // ex. when selecting an icon
+
+          let newClassName;
+          const classes = this.builder.cssClasses.leading;
+
+          if (num === '') {
+            // clean
+            newClassName = '';
+          } else if (num === '+' || num === '-') {
+            for (let i = 0; i < Object.keys(classes).length; i++) {
+              let className = Object.values(classes)[i];
+
+              if (dom$5.hasClass(container, className)) {
+                if (num === '+') {
+                  if (i + 1 === Object.keys(classes).length) return;
+                  newClassName = Object.values(classes)[i + 1];
+                  break;
+                } else if (num === '-') {
+                  if (i - 1 < 0) return;
+                  newClassName = Object.values(classes)[i - 1];
+                  break;
+                }
+              }
             }
-          } else if (document.selection) {
-            curr = document.selection.createRange();
-            elm = document.selection.createRange().parentElement();
-          }
-        } catch (e) {
-          if (this.builder.activeIcon) {
-            // If icon is selected, the selection will not be a text selection
-            elm = this.builder.activeIcon;
           } else {
-            return;
+            if (num === '1') {
+              newClassName = classes.leading_10;
+            } else if (num === '1.2') {
+              newClassName = classes.leading_12;
+            } else if (num === '1.4') {
+              newClassName = classes.leading_14;
+            } else if (num === '1.6') {
+              newClassName = classes.leading_16;
+            } else if (num === '1.8') {
+              newClassName = classes.leading_18;
+            } else if (num === '2') {
+              newClassName = classes.leading_20;
+            } else if (num === '2.2') {
+              newClassName = classes.leading_22;
+            }
           }
-        } // If icon is selected
 
+          if (!newClassName) {
+            if (num === '+') {
+              newClassName = classes.leading_16;
+            } else if (num === '-') {
+              newClassName = classes.leading_14;
+            }
+          }
 
-        if (this.builder.activeIcon) {
-          elm = this.builder.activeIcon;
-        } // Find block element (line-height only works on block element)
+          dom$5.execCommandClass(newClassName, classes);
+        } else {
+          let elm;
 
+          try {
+            let curr;
 
-        let element = elm;
+            if (window.getSelection) {
+              curr = window.getSelection().getRangeAt(0).commonAncestorContainer;
 
-        while (element) {
-          if (element.tagName === 'BODY' || element.tagName === 'HTML') return false;
+              if (curr.nodeType === 3) {
+                //text node
+                elm = curr.parentNode;
+              } else {
+                elm = curr;
+              }
+            } else if (document.selection) {
+              curr = document.selection.createRange();
+              elm = document.selection.createRange().parentElement();
+            }
+          } catch (e) {
+            if (this.builder.activeIcon) {
+              // If icon is selected, the selection will not be a text selection
+              elm = this.builder.activeIcon;
+            } else {
+              return;
+            }
+          } // If icon is selected
 
-          if (window.getComputedStyle(element).getPropertyValue('display') !== 'inline') {
-            elm = element;
-            break;
-          }
 
-          element = element.parentNode;
-        } // var text = dom.getSelected();
+          if (this.builder.activeIcon) {
+            elm = this.builder.activeIcon;
+          } // Find block element (line-height only works on block element)
+
+
+          let element = elm;
+
+          while (element) {
+            if (element.tagName === 'BODY' || element.tagName === 'HTML') return false;
+
+            if (window.getComputedStyle(element).getPropertyValue('display') !== 'inline') {
+              elm = element;
+              break;
+            }
 
+            element = element.parentNode;
+          } // var text = dom.getSelected();
+          // let currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
 
-        this.builder.uo.saveForUndo(); // let currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
 
-        let isInPx = false;
-        let currentLineHeight = elm.style.lineHeight;
+          let isInPx = false;
+          let currentLineHeight = elm.style.lineHeight;
 
-        if (currentLineHeight) {
-          if (currentLineHeight.indexOf('px') === -1) {
-            currentLineHeight = parseFloat(currentLineHeight);
+          if (currentLineHeight) {
+            if (currentLineHeight.indexOf('px') === -1) {
+              currentLineHeight = parseFloat(currentLineHeight);
+            } else {
+              isInPx = true;
+            }
           } else {
             isInPx = true;
           }
-        } else {
-          isInPx = true;
-        }
 
-        if (isInPx) {
-          let fontSize = Number(window.getComputedStyle(elm).getPropertyValue('font-size').match(/\d+/)[0]);
-          currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
+          if (isInPx) {
+            let fontSize = Number(window.getComputedStyle(elm).getPropertyValue('font-size').match(/\d+/)[0]);
+            currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
 
-          if (fontSize > currentLineHeight) {
-            currentLineHeight = fontSize / currentLineHeight;
-          } else if (fontSize < currentLineHeight) {
-            currentLineHeight = currentLineHeight / fontSize;
-          } else {
-            currentLineHeight = 1;
+            if (fontSize > currentLineHeight) {
+              currentLineHeight = fontSize / currentLineHeight;
+            } else if (fontSize < currentLineHeight) {
+              currentLineHeight = currentLineHeight / fontSize;
+            } else {
+              currentLineHeight = 1;
+            }
           }
-        }
 
-        let lineheight;
+          let lineheight;
 
-        if (num === '+') {
-          lineheight = currentLineHeight + 0.1;
-        } else if (num === '-') {
-          lineheight = currentLineHeight - 0.1;
-          if (lineheight < 0.2) lineheight = 0.2; // prevent very small number
-        } else if (num === '') {
-          lineheight = '';
-        } else {
-          lineheight = num;
-        }
-        /** mod by Jack */
-        //elm.style.lineHeight = lineheight;
+          if (num === '+') {
+            lineheight = currentLineHeight + 0.1;
+          } else if (num === '-') {
+            lineheight = currentLineHeight - 0.1;
+            if (lineheight < 0.2) lineheight = 0.2; // prevent very small number
+          } else if (num === '') {
+            lineheight = '';
+          } else {
+            lineheight = num;
+          }
+          /** mod by Jack */
+          //elm.style.lineHeight = lineheight;
 
 
-        dom$5.doFunction(elm, function (theEl) {
-          // apply to block element only
-          if (window.getComputedStyle(theEl).getPropertyValue('display') !== 'inline') {
-            theEl.style.lineHeight = lineheight;
-          }
-        }, true); //save selection
+          dom$5.doFunction(elm, function (theEl) {
+            // apply to block element only
+            if (window.getComputedStyle(theEl).getPropertyValue('display') !== 'inline') {
+              theEl.style.lineHeight = lineheight;
+            }
+          }, true);
+        } //save selection
+
 
         util.saveSelection();
         this.getState(); //Trigger Change event
@@ -59435,60 +59976,118 @@ class Rte {
         let num = btn.getAttribute('data-value');
         util.restoreSelection(); //a must
 
-        let elm;
+        this.builder.uo.saveForUndo();
 
-        try {
-          let curr;
+        if (this.builder.useCssClasses) {
+          const selection = dom$5.getSelection();
+          if (!selection) return;
+          const anchorNode = selection.anchorNode;
+          let container;
 
-          if (window.getSelection) {
-            curr = window.getSelection().getRangeAt(0).commonAncestorContainer;
+          if (anchorNode) {
+            container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
+          }
 
-            if (curr.nodeType === 3) {
-              //text node
-              elm = curr.parentNode;
-            } else {
-              elm = curr;
+          if (!container) return; // ex. when selecting an icon
+
+          let newClassName;
+          const classes = this.builder.cssClasses.tracking;
+
+          if (num === '') {
+            // clean
+            newClassName = '';
+          } else if (num === '+' || num === '-') {
+            for (let i = 0; i < Object.keys(classes).length; i++) {
+              let className = Object.values(classes)[i];
+
+              if (dom$5.hasClass(container, className)) {
+                if (num === '+') {
+                  if (i + 1 === Object.keys(classes).length) return;
+                  newClassName = Object.values(classes)[i + 1];
+                  break;
+                } else if (num === '-') {
+                  if (i - 1 < 0) return;
+                  newClassName = Object.values(classes)[i - 1];
+                  break;
+                }
+              }
+            }
+          } else {
+            if (num === '1') {
+              newClassName = classes.tracking_025;
+            }
+
+            if (num === '2') {
+              newClassName = classes.tracking_050;
             }
-          } else if (document.selection) {
-            curr = document.selection.createRange();
-            elm = document.selection.createRange().parentElement();
           }
-        } catch (e) {
+
+          if (!newClassName) {
+            if (num === '+') {
+              newClassName = classes.tracking_025;
+            } else if (num === '-') {
+              newClassName = classes.tracking__025;
+            }
+          }
+
+          if (newClassName === classes.tracking_000) newClassName = ''; // clear for normal tracking
+
+          dom$5.execCommandClass(newClassName, classes);
+        } else {
+          let elm;
+
+          try {
+            let curr;
+
+            if (window.getSelection) {
+              curr = window.getSelection().getRangeAt(0).commonAncestorContainer;
+
+              if (curr.nodeType === 3) {
+                //text node
+                elm = curr.parentNode;
+              } else {
+                elm = curr;
+              }
+            } else if (document.selection) {
+              curr = document.selection.createRange();
+              elm = document.selection.createRange().parentElement();
+            }
+          } catch (e) {
+            if (this.builder.activeIcon) {
+              // If icon is selected, the selection will not be a text selection
+              elm = this.builder.activeIcon;
+            } else {
+              return;
+            }
+          } // If icon is selected
+
+
           if (this.builder.activeIcon) {
-            // If icon is selected, the selection will not be a text selection
             elm = this.builder.activeIcon;
-          } else {
-            return;
           }
-        } // If icon is selected
 
+          let currentLetterSpacing = parseInt(window.getComputedStyle(elm).getPropertyValue('letter-spacing'));
+          if (isNaN(currentLetterSpacing)) currentLetterSpacing = 0;
+          let letterspacing;
 
-        if (this.builder.activeIcon) {
-          elm = this.builder.activeIcon;
-        } // var text = dom.getSelected();
-
+          if (num === '+') {
+            letterspacing = currentLetterSpacing + 1 + 'px';
+          } else if (num === '-') {
+            letterspacing = currentLetterSpacing - 1 + 'px';
+          } else if (num === '') {
+            letterspacing = '';
+          } else {
+            letterspacing = num + 'px';
+          }
+          /** mod by Jack */
+          //elm.style.letterSpacing = letterspacing;
 
-        this.builder.uo.saveForUndo();
-        let currentLetterSpacing = parseInt(window.getComputedStyle(elm).getPropertyValue('letter-spacing'));
-        if (isNaN(currentLetterSpacing)) currentLetterSpacing = 0;
-        let letterspacing;
-
-        if (num === '+') {
-          letterspacing = currentLetterSpacing + 1 + 'px';
-        } else if (num === '-') {
-          letterspacing = currentLetterSpacing - 1 + 'px';
-        } else if (num === '') {
-          letterspacing = '';
-        } else {
-          letterspacing = num + 'px';
-        }
-        /** mod by Jack */
-        //elm.style.letterSpacing = letterspacing;
 
+          dom$5.doFunction(elm, function (theEl) {
+            theEl.style.letterSpacing = letterspacing;
+          }, true);
+        } //save selection
 
-        dom$5.doFunction(elm, function (theEl) {
-          theEl.style.letterSpacing = letterspacing;
-        }, true); //save selection
 
         util.saveSelection();
         this.getState(); //Trigger Change event
@@ -62579,9 +63178,227 @@ class ContentBuilder {
           capitalize: 'capitalize',
           normal: 'normal-case'
         },
+        tracking: {
+          tracking__100: 'tracking--100',
+          tracking__075: 'tracking--75',
+          tracking__050: 'tracking-tighter',
+          tracking__025: 'tracking-tight',
+          tracking_000: 'tracking-normal',
+          tracking_025: 'tracking-wide',
+          tracking_050: 'tracking-wider',
+          tracking_075: 'tracking-75',
+          tracking_100: 'tracking-widest',
+          tracking_125: 'tracking-125',
+          tracking_150: 'tracking-150',
+          tracking_175: 'tracking-175',
+          tracking_200: 'tracking-200',
+          tracking_225: 'tracking-225',
+          tracking_250: 'tracking-250',
+          tracking_275: 'tracking-275',
+          tracking_300: 'tracking-300',
+          tracking_325: 'tracking-325',
+          tracking_350: 'tracking-350',
+          tracking_375: 'tracking-375',
+          tracking_400: 'tracking-400',
+          tracking_425: 'tracking-425',
+          tracking_450: 'tracking-450',
+          tracking_475: 'tracking-475',
+          tracking_500: 'tracking-500'
+        },
+        leading: {
+          leading_5: 'leading-05',
+          leading_6: 'leading-06',
+          leading_7: 'leading-07',
+          leading_8: 'leading-08',
+          leading_9: 'leading-09',
+          leading_10: 'leading-none',
+          leading_11: 'leading-11',
+          leading_12: 'leading-12',
+          leading_125: 'leading-tight',
+          leading_13: 'leading-13',
+          leading_1375: 'leading-snug',
+          leading_14: 'leading-14',
+          leading_15: 'leading-normal',
+          leading_16: 'leading-16',
+          leading_1625: 'leading-relaxed',
+          leading_17: 'leading-17',
+          leading_18: 'leading-18',
+          leading_19: 'leading-19',
+          leading_20: 'leading-loose',
+          leading_21: 'leading-21',
+          leading_22: 'leading-22',
+          leading_23: 'leading-23',
+          leading_24: 'leading-24',
+          leading_25: 'leading-25',
+          leading_26: 'leading-26',
+          leading_27: 'leading-27',
+          leading_28: 'leading-28',
+          leading_29: 'leading-29',
+          leading_30: 'leading-30'
+        },
+        padding: {
+          all: {
+            p_0: 'p-0',
+            p_1: 'p-1',
+            p_2: 'p-2',
+            p_3: 'p-3',
+            p_4: 'p-4',
+            p_5: 'p-5',
+            p_6: 'p-6',
+            p_7: 'p-7',
+            p_8: 'p-8',
+            p_9: 'p-9',
+            p_10: 'p-10',
+            p_11: 'p-11',
+            p_12: 'p-12',
+            p_14: 'p-14',
+            p_16: 'p-16',
+            p_20: 'p-20'
+          },
+          x: {
+            px_0: 'px-0',
+            px_1: 'px-1',
+            px_2: 'px-2',
+            px_3: 'px-3',
+            px_4: 'px-4',
+            px_5: 'px-5',
+            px_6: 'px-6',
+            px_7: 'px-7',
+            px_8: 'px-8',
+            px_9: 'px-9',
+            px_10: 'px-10',
+            px_11: 'px-11',
+            px_12: 'px-12',
+            px_14: 'px-14',
+            px_16: 'px-16',
+            px_20: 'px-20'
+          },
+          y: {
+            py_0: 'py-0',
+            py_1: 'py-1',
+            py_2: 'py-2',
+            py_3: 'py-3',
+            py_4: 'py-4',
+            py_5: 'py-5',
+            py_6: 'py-6',
+            py_7: 'py-7',
+            py_8: 'py-8',
+            py_9: 'py-9',
+            py_10: 'py-10',
+            py_11: 'py-11',
+            py_12: 'py-12',
+            py_14: 'py-14',
+            py_16: 'py-16',
+            py_20: 'py-20'
+          },
+          top: {
+            pt_0: 'pt-0',
+            pt_1: 'pt-1',
+            pt_2: 'pt-2',
+            pt_3: 'pt-3',
+            pt_4: 'pt-4',
+            pt_5: 'pt-5',
+            pt_6: 'pt-6',
+            pt_7: 'pt-7',
+            pt_8: 'pt-8',
+            pt_9: 'pt-9',
+            pt_10: 'pt-10',
+            pt_11: 'pt-11',
+            pt_12: 'pt-12',
+            pt_14: 'pt-14',
+            pt_16: 'pt-16',
+            pt_20: 'pt-20'
+          },
+          right: {
+            pr_0: 'pr-0',
+            pr_1: 'pr-1',
+            pr_2: 'pr-2',
+            pr_3: 'pr-3',
+            pr_4: 'pr-4',
+            pr_5: 'pr-5',
+            pr_6: 'pr-6',
+            pr_7: 'pr-7',
+            pr_8: 'pr-8',
+            pr_9: 'pr-9',
+            pr_10: 'pr-10',
+            pr_11: 'pr-11',
+            pr_12: 'pr-12',
+            pr_14: 'pr-14',
+            pr_16: 'pr-16',
+            pr_20: 'pr-20'
+          },
+          bottom: {
+            pb_0: 'pb-0',
+            pb_1: 'pb-1',
+            pb_2: 'pb-2',
+            pb_3: 'pb-3',
+            pb_4: 'pb-4',
+            pb_5: 'pb-5',
+            pb_6: 'pb-6',
+            pb_7: 'pb-7',
+            pb_8: 'pb-8',
+            pb_9: 'pb-9',
+            pb_10: 'pb-10',
+            pb_11: 'pb-11',
+            pb_12: 'pb-12',
+            pb_14: 'pb-14',
+            pb_16: 'pb-16',
+            pb_20: 'pb-20'
+          },
+          left: {
+            pl_0: 'pl-0',
+            pl_1: 'pl-1',
+            pl_2: 'pl-2',
+            pl_3: 'pl-3',
+            pl_4: 'pl-4',
+            pl_5: 'pl-5',
+            pl_6: 'pl-6',
+            pl_7: 'pl-7',
+            pl_8: 'pl-8',
+            pl_9: 'pl-9',
+            pl_10: 'pl-10',
+            pl_11: 'pl-11',
+            pl_12: 'pl-12',
+            pl_14: 'pl-14',
+            pl_16: 'pl-16',
+            pl_20: 'pl-20'
+          }
+        },
         extend: {
           superscript: 'sup',
           subscript: 'sub'
+        },
+        display: {
+          flex: 'flex',
+          block: 'block',
+          inline: 'inline',
+          inline_block: 'inline-block'
+        },
+        flexDirection: {
+          row: 'flex-row',
+          column: 'flex-col',
+          row_reverse: 'flex-row-reverse',
+          column_reverse: 'flex-col-reverse'
+        },
+        flexWrap: {
+          wrap: 'flex-wrap',
+          nowrap: 'flex-nowrap',
+          wrap_reverse: 'flex-wrap-reverse'
+        },
+        justifyContent: {
+          start: 'justify-start',
+          end: 'justify-end',
+          center: 'justify-center',
+          between: 'justify-between',
+          around: 'justify-around',
+          evenly: 'justify-evenly'
+        },
+        alignItems: {
+          start: 'items-start',
+          end: 'items-end',
+          center: 'items-center',
+          baseline: 'items-baseline',
+          stretch: 'items-stretch'
         }
       },
       useCssClasses: false
@@ -63433,6 +64250,10 @@ class ContentBuilder {
     new Dropdown(element, opts);
   }
 
+  colorClassPicker() {
+    return new ColorClassPicker();
+  }
+
   destroy() {
     document.removeEventListener('click', this.doDocumentClick, false);
     document.removeEventListener('keydown', this.doDocumentKeydown, false);