@innovastudio/contentbox 1.1.12 → 1.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -38,7 +38,6 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.0.89",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",

package/public/contentbox/contentbox.esm.js

@@ -8220,25 +8220,18 @@ class EditBox {
     btnBoxSizes.forEach(btnBoxSize => {
       btnBoxSize.addEventListener('click', () => {
         this.builder.editor.saveForUndo();
-        const arrMaxWidth = [];
-        let n = 300;
-
-        while (n <= 2700) {
-          arrMaxWidth.push(n);
-          n = n + 20;
-        }
-
-        let activeBox = this.builder.activeBox;
-        let container = activeBox.querySelector('.is-container');
-        container.classList.forEach(item => {
-          if (item.indexOf('is-content-') !== -1 && item !== 'is-content-left' && item !== 'is-content-right') {
-            dom$H.removeClass(container, item);
-          }
-        });
+        const activeBox = this.builder.activeBox;
+        const container = activeBox.querySelector('.is-container');
+        const contentSizes = this.builder.contentSizes;
         let val = btnBoxSize.getAttribute('data-value');
 
         if (val === '') {
           container.style.maxWidth = '';
+          container.classList.forEach(item => {
+            if (item.indexOf('is-content-') !== -1 && item !== 'is-content-left' && item !== 'is-content-right') {
+              dom$H.removeClass(container, item);
+            }
+          });
           dom$H.addClass(container, 'is-content-none'); //new
 
           modalEditBox.querySelector('.inp-box-size').value = '';
@@ -8248,36 +8241,67 @@ class EditBox {
           return;
         }
 
-        if (val === '-' || val === '+') {
-          let maxWidth = parseInt(window.getComputedStyle(container, null).getPropertyValue('max-width'));
+        let targetWidth;
 
-          for (let n = 0; n <= 121; n++) {
-            let mw = arrMaxWidth[n];
+        if (val === '+' || val === '-') {
+          for (let i = 0; i < contentSizes.length; i++) {
+            if (dom$H.hasClass(container, `is-content-${contentSizes[i]}`)) {
+              if (val === '+') {
+                if (i + 1 >= contentSizes.length) {
+                  targetWidth = contentSizes[i];
+                } else {
+                  targetWidth = contentSizes[i + 1];
+                }
 
-            if (mw > maxWidth) {
-              maxWidth = mw - 20;
-              break;
+                break;
+              }
+
+              if (val === '-') {
+                if (i - 1 < 0) {
+                  targetWidth = contentSizes[i];
+                } else {
+                  targetWidth = contentSizes[i - 1];
+                }
+
+                break;
+              }
             }
           }
 
-          if (val === '-') {
-            val = maxWidth - 20;
-          } else if (val === '+') {
-            val = maxWidth + 20;
-          }
+          if (!targetWidth) {
+            const currentWidth = container.offsetWidth; // let targetWidth;
 
-          if (val <= 300) val = 300;
-          if (val >= 2700) val = 2700;
-        } // container.style.maxWidth = val +'px'; 
+            for (let i = 0; i < contentSizes.length; i++) {
+              if (contentSizes[i] <= currentWidth && currentWidth < contentSizes[i + 1]) {
+                if (val === '+') {
+                  targetWidth = contentSizes[i + 1];
+                  break;
+                }
+              }
 
+              if (contentSizes[i] < currentWidth && currentWidth <= contentSizes[i + 1]) {
+                if (val === '-') {
+                  targetWidth = contentSizes[i];
+                  break;
+                }
+              }
+            }
+          }
+        } else {
+          targetWidth = val;
+        }
 
+        if (!targetWidth) targetWidth = 800;
         container.style.maxWidth = ''; //remove inline style
 
-        dom$H.addClass(container, 'is-content-' + val); //new
-        // dom.addClass(container, 'v2'); //new
-
-        modalEditBox.querySelector('.inp-box-size').value = val;
-        modalEditBox.querySelector('.val-box-size').innerHTML = val; //Trigger Change event
+        container.classList.forEach(item => {
+          if (item.indexOf('is-content-') !== -1 && item !== 'is-content-left' && item !== 'is-content-right') {
+            dom$H.removeClass(container, item);
+          }
+        });
+        dom$H.addClass(container, 'is-content-' + targetWidth);
+        modalEditBox.querySelector('.inp-box-size').value = targetWidth;
+        modalEditBox.querySelector('.val-box-size').innerHTML = targetWidth; //Trigger Change event
 
         this.builder.settings.onChange();
       });
@@ -18076,6 +18100,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
 
 
@@ -23799,6 +23835,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;
@@ -60409,7 +60446,7 @@ class ColumnTool {
                                 <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">
+                            <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>
@@ -60453,22 +60490,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">
@@ -61375,65 +61418,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
 
 
@@ -68000,6 +68130,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 {
@@ -73622,6 +73808,38 @@ class ContentBuilder {
         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
@@ -74473,6 +74691,10 @@ class ContentBuilder {
     new Dropdown(element, opts);
   }
 
+  colorClassPicker() {
+    return new ColorClassPicker();
+  }
+
   destroy() {
     document.removeEventListener('click', this.doDocumentClick, false);
     document.removeEventListener('keydown', this.doDocumentKeydown, false);
@@ -77655,6 +77877,7 @@ class ContentBox {
       useCssClasses: false,
       zoom: 0.6,
       contentStyleWithSample: false,
+      contentSizes: [300, 320, 340, 360, 380, 400, 420, 440, 460, 480, 500, 520, 540, 560, 580, 600, 620, 640, 660, 680, 700, 720, 740, 760, 780, 800, 820, 840, 860, 880, 900, 920, 940, 960, 970, 980, 1000, 1020, 1040, 1050, 1060, 1080, 1100, 1120, 1140, 1160, 1180, 1200, 1220, 1240, 1260, 1280, 1300, 1320, 1340, 1360, 1380, 1400, 1420, 1440, 1460, 1480, 1500, 1520, 1540, 1560, 1580, 1600, 1620, 1640, 1660, 1680, 1700, 1720, 1740, 1760, 1780, 1800, 1820, 1840, 1860, 1880, 1900, 1920, 1940, 1960, 1980, 2000, 2020, 2040, 2060, 2080, 2100, 2120, 2140, 2160, 2180, 2200, 2220, 2240, 2260, 2280, 2300, 2320, 2340, 2360, 2380, 2400, 2420, 2440, 2460, 2480, 2500, 2520, 2540, 2560, 2580, 2600, 2620, 2640, 2660, 2680, 2700],
       contentStyles: {
         'data': {
           'categories': [