@innovastudio/contentbox 1.1.8 → 1.1.11

package/public/contentbox/contentbox.esm.js

@@ -1667,6 +1667,21 @@ class SideBar {
                     var googleFonts = result[0].googleFonts;
                     var contentCss = result[0].contentCss;
                     var contentClass = result[0].contentClass;
+
+                    //To Tailwind
+                    if (framework == 'tailwind') {
+                        html = html.replace(new RegExp(' container', 'g'), ' container');
+                        html = html.replace(new RegExp('row clearfix', 'g'), 'flex flex-col md:flex-row');
+                        html = html.replace(new RegExp('column full', 'g'), 'w-full px-4');
+                        html = html.replace(new RegExp('column half', 'g'), 'w-full md:w-6/12 px-4');
+                        html = html.replace(new RegExp('column third', 'g'), 'w-full md:w-4/12 px-4');
+                        html = html.replace(new RegExp('column fourth', 'g'), 'w-full md:w-3/12 px-4');
+                        html = html.replace(new RegExp('column fifth', 'g'), 'w-full md:w-2/12 px-4'); //not needed
+                        html = html.replace(new RegExp('column sixth', 'g'), 'w-full md:w-2/12 px-4');
+                        html = html.replace(new RegExp('column two-third', 'g'), 'w-full md:w-8/12 px-4');
+                        html = html.replace(new RegExp('column two-fourth', 'g'), 'w-full md:w-9/12 px-4');
+                        html = html.replace(new RegExp('column two-sixth', 'g'), 'w-full md:w-10/12 px-4');
+                    }
                                 
                     //To Bootstrap
                     if (framework == 'bootstrap') {
@@ -8042,7 +8057,7 @@ class EditBox {
     this.builder = builder;
     this.builderStuff = this.builder.builderStuff;
     const builderStuff = this.builderStuff;
-    let html = '' + '<div id="divBoxTool">' + '<form id="form-upload-cover" data-tooltip-top data-title="' + out('Background Image') + '" target="frame-upload-cover" method="post" action="' + this.builder.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">' + '<div style="width:40px;height:40px;overflow:hidden;">' + '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 12px;left: 12px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' + '<input type="file" title="' + out('Background Image') + '" id="fileCover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input id="hidcustomval" name="hidcustomval" type="hidden" value="" />' + '<iframe id="frame-upload-cover" name="frame-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</form>' + '<button id="btnEditBox" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button id="btnEditModule" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editcustomcode">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div id="divBoxSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="440" style="width:40px;border-left:none">440</button>' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="640" style="width:40px;border-left:none">640</button>' + '<button class="cmd-box-size" data-value="760" style="width:40px;border-left:none">760</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="860" style="width:40px;border-top:none">860</button>' + '<button class="cmd-box-size" data-value="940" style="width:40px;border-top:none">940</button>' + '<button class="cmd-box-size" data-value="1000" style="width:40px;border-top:none;border-left:none">1020</button>' + '<button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button>' + '<button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button title="' + out('Clear') + '" class="cmd-box-size" data-value=""><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Decrease') + '" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button>' + '<button title="' + out('Increase') + '"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Clear') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>' + '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;">' + '<input id="hidRefId5" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="position: absolute;top: 10px;left: 15px;"><use xlink:href="#ion-image"></use></svg>' + '<input title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
+    let html = '' + '<div id="divBoxTool">' + '<form id="form-upload-cover" data-tooltip-top data-title="' + out('Background Image') + '" target="frame-upload-cover" method="post" action="' + this.builder.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">' + '<div style="width:40px;height:40px;overflow:hidden;">' + '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 12px;left: 12px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' + '<input type="file" title="' + out('Background Image') + '" id="fileCover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input id="hidcustomval" name="hidcustomval" type="hidden" value="" />' + '<iframe id="frame-upload-cover" name="frame-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</form>' + '<button id="btnEditBox" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button id="btnEditModule" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editcustomcode">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div id="divBoxSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ': &nbsp;<span class="val-box-size" style="font-size:12px"></span></div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="display:none;width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="600" style="width:40px;border-left:none">600</button>' + '<button class="cmd-box-size" data-value="700" style="width:40px;border-left:none">700</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="900" style="width:40px;border-top:none">900</button>' + '<button class="cmd-box-size" data-value="1000" style="width:40px;border-top:none;border-left:none">1000</button>' + '<button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button>' + '<button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button>' + '<button class="cmd-box-size" data-value="1300" style="width:40px;border-top:none;border-left:none">1300</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button class="cmd-box-size" data-value="1500" style="width:40px;border-top:none;border-left:none">1500</button>' + '<button class="cmd-box-size" data-value="1600" style="width:40px;border-top:none;border-left:none">1600</button>' + '<button class="cmd-box-size" data-value="1800" style="width:40px;border-top:none;border-left:none">1800</button>' + '<button title="' + out('Clear') + '" class="cmd-box-size" data-value=""><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Decrease') + '" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button>' + '<button title="' + out('Increase') + '"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Clear') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>' + '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;">' + '<input id="hidRefId5" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="position: absolute;top: 10px;left: 15px;"><use xlink:href="#ion-image"></use></svg>' + '<input title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
     html += '<div id="divBoxContentText" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Text Style') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Light') + '" class="cmd-box-textcolor" data-value="light">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-box-textcolor" data-value="dark" style="border-left:none;">' + out('Dark') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkOptimizeTextSize" style="margin:0;"><input id="chkOptimizeTextSize" type="checkbox" /> ' + out('Optimize text sizes on large screen.') + '</label>' + '</div>' + '<div id="divContainerTransparency" style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-textopacity" data-value="+" style="width:40px"> + </button>' + '<button title="' + out('Decrease') + '" class="cmd-box-textopacity" data-value="-" style="width:40px;border-left:none;"> - </button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textopacity" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divContainerTextAlign" style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">Align:</div>' + '<div style="display:flex">' + '<button title="' + out('Align Left') + '" class="cmd-box-textalign" data-value="left" style="width:40px"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>' + '<button title="' + out('Align Center') + '" class="cmd-box-textalign" data-value="center" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>' + '<button title="' + out('Align Right') + '" class="cmd-box-textalign" data-value="right" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>' + '<button title="' + out('Align Full') + '" class="cmd-box-textalign" data-value="justify" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>' + '<br style="clear:both">' + '</div>' + '</div>' + (this.builder.settings.enableContentStyle ? '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Typography') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Change Style') + '" class="cmd-box-typography" data-value="+"> ' + out('Change Style') + ' </button>' + '<br style="clear:both">' + '</div>' + '</div>' : '') + '</div>' + '<div id="divBoxContentContainer" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="padding-top:10px;">' + '<label for="chkParallaxContent" style="margin:0;"><input id="chkParallaxContent" type="checkbox" /> ' + out('Parallax') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkFadeContent" style="margin:0;"><input id="chkFadeContent" type="checkbox" /> ' + out('Fade') + '</label>' + '</div>' + '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:20px;">' + '<div style="padding-top:13px;padding-bottom: 3px;">' + out('Position') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Top Left') + '" class="cmd-box-content-pos" data-value="topleft" style="width:40px;">&#8598;</button>' + '<button title="' + out('Top Center') + '" class="cmd-box-content-pos" data-value="topcenter" style="width:40px;border-left:none;">&#8593;</button>' + '<button title="' + out('Top Right') + '" class="cmd-box-content-pos" data-value="topright" style="width:40px;border-left:none;">&#8599;</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Middle Left') + '" class="cmd-box-content-pos" data-value="middleleft" style="width:40px;border-top:none;">&#8592;</button>' + '<button title="' + out('Middle Center') + '" class="cmd-box-content-pos" data-value="middlecenter" style="width:40px;border-left:none;border-top:none;">&#9737;</button>' + '<button title="' + out('Middle Right') + '" class="cmd-box-content-pos" data-value="middleright" style="width:40px;border-left:none;border-top:none;">&#8594;</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Bottom Left') + '" class="cmd-box-content-pos" data-value="bottomleft" style="width:40px;border-top:none;">&#8601;</button>' + '<button title="' + out('Bottom Center') + '" class="cmd-box-content-pos" data-value="bottomcenter" style="width:40px;border-left:none;border-top:none;">&#8595;</button>' + '<button title="' + out('Bottom Right') + '" class="cmd-box-content-pos" data-value="bottomright" style="width:40px;border-left:none;border-top:none;">&#8600;</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 1px;">' + out('Height') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Auto') + '" class="cmd-content-height" data-value="" style="width:60px">Auto</button>' + '<button title="' + out('Full') + '" class="cmd-content-height" data-value="100" style="width:40px">Full</button>' + '</div>' + '<div class="div-content-justify">' + '<div style="padding-top:10px;padding-bottom: 1px;">' + out('Justify') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Top') + '" class="cmd-content-justify" data-value="flex-start" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-up"></use></svg></button>' + '<button title="' + out('Bottom') + '" class="cmd-content-justify" data-value="flex-end" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-down"></use></svg></button>' + '<button title="' + out('Space Between') + '" class="cmd-content-justify" data-value="space-between" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-space-between"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Vertical Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Horizontal Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:13px;">' + '<label for="chkAutofitContent" style="margin:0;"><input id="chkAutofitContent" type="checkbox" /> ' + out('Autofit Content on Mobile') + '</label>' + '</div>' + '</div>' + '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg" style="margin:0;"><input id="chkParallaxBg" type="checkbox" /> ' + out('Parallax') + ' & ' + out('Scale') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg2" style="margin:0;"><input id="chkParallaxBg2" type="checkbox" /> ' + out('Parallax') + '</label>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Overlay Color') + '" class="input-box-overlaycolor is-btn-color" style="margin-right:15px"></button>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-overlayopacity" data-value="+" style="width:40px;">+</button>' + '<button title="' + out('Decrease') + '" class="cmd-box-overlayopacity" data-value="-" style="width:40px;border-left:none;">-</button>' + '<button title="' + out('None') + '" class="cmd-box-overlayopacity" data-value="0" style="border-left:none;min-width:100px;">' + out('None') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxAnimate" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<select class="cmd-box-animate">' + '<option value="">' + out('None') + '</option>' + '<option value="is-pulse">pulse</option>' + '<option value="is-bounceIn">bounceIn</option>' + '<option value="is-fadeIn">fadeIn</option>' + '<option value="is-fadeInDown">fadeInDown</option>' + '<option value="is-fadeInLeft">fadeInLeft</option>' + '<option value="is-fadeInRight">fadeInRight</option>' + '<option value="is-fadeInUp">fadeInUp</option>' + '<option value="is-flipInX">flipInX</option>' + '<option value="is-flipInY">flipInY</option>' + '<option value="is-slideInUp">slideInUp</option>' + '<option value="is-slideInDown">slideInDown</option>' + '<option value="is-slideInLeft">slideInLeft</option>' + '<option value="is-slideInRight">slideInRight</option>' + '<option value="is-zoomIn">zoomIn</option>' + '</select>' + '<label for="chkAnimOnce" style="margin:10px 0 0;"><input id="chkAnimOnce" type="checkbox" /> ' + out('Once') + '</label>' + '</div>' + '<div>' + '<label style="padding-top:20px;">' + out('Delay') + ': ' + '<select class="cmd-box-animatedelay" style="margin-top:3px;">' + '<option value="">' + out('None') + '</option>' + '<option value="delay-0ms">0s</option>' + '<option value="delay-100ms">100ms</option>' + '<option value="delay-200ms">200ms</option>' + '<option value="delay-300ms">300ms</option>' + '<option value="delay-400ms">400ms</option>' + '<option value="delay-500ms">500ms</option>' + '<option value="delay-600ms">600ms</option>' + '<option value="delay-700ms">700ms</option>' + '<option value="delay-800ms">800ms</option>' + '<option value="delay-900ms">900ms</option>' + '<option value="delay-1000ms">1000ms</option>' + '<option value="delay-1100ms">1100ms</option>' + '<option value="delay-1200ms">1200ms</option>' + '<option value="delay-1300ms">1300ms</option>' + '<option value="delay-1400ms">1400ms</option>' + '<option value="delay-1500ms">1500ms</option>' + '<option value="delay-1600ms">1600ms</option>' + '<option value="delay-1700ms">1700ms</option>' + '<option value="delay-1800ms">1800ms</option>' + '<option value="delay-1900ms">1900ms</option>' + '<option value="delay-2000ms">2000ms</option>' + '<option value="delay-2100ms">2100ms</option>' + '<option value="delay-2200ms">2200ms</option>' + '<option value="delay-2300ms">2300ms</option>' + '<option value="delay-2400ms">2400ms</option>' + '<option value="delay-2500ms">2500ms</option>' + '<option value="delay-2600ms">2600ms</option>' + '<option value="delay-2700ms">2700ms</option>' + '<option value="delay-2800ms">2800ms</option>' + '<option value="delay-2900ms">2900ms</option>' + '<option value="delay-3000ms">3000ms</option>' + '</select></label>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-animate-test" style="width:100%">' + out('Test') + '</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal pickphoto">' + '<div style="max-width:1000px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Photos') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '</div>' + '</div>' + '';
     dom$H.appendHtml(builderStuff, html); // Box Tool
 
@@ -8226,7 +8241,8 @@ class EditBox {
           container.style.maxWidth = '';
           dom$H.addClass(container, 'is-content-none'); //new
 
-          modalEditBox.querySelector('.inp-box-size').value = ''; //Trigger Change event
+          modalEditBox.querySelector('.inp-box-size').value = '';
+          modalEditBox.querySelector('.val-box-size').innerHTML = ''; //Trigger Change event
 
           this.builder.settings.onChange();
           return;
@@ -8252,13 +8268,16 @@ class EditBox {
 
           if (val <= 300) val = 300;
           if (val >= 2700) val = 2700;
-        }
+        } // container.style.maxWidth = val +'px'; 
+
+
+        container.style.maxWidth = ''; //remove inline style
 
-        container.style.maxWidth = val + 'px';
         dom$H.addClass(container, 'is-content-' + val); //new
         // dom.addClass(container, 'v2'); //new
 
-        modalEditBox.querySelector('.inp-box-size').value = val; //Trigger Change event
+        modalEditBox.querySelector('.inp-box-size').value = val;
+        modalEditBox.querySelector('.val-box-size').innerHTML = val; //Trigger Change event
 
         this.builder.settings.onChange();
       });
@@ -9489,6 +9508,9 @@ class EditBox {
     if (container) {
       let maxWidth = parseInt(container.style.maxWidth);
       if (!isNaN(maxWidth)) inpBoxSize.value = parseInt(container.style.maxWidth);
+      modalEditBox.querySelector('.val-box-size').innerHTML = '';
+      maxWidth = parseInt(window.getComputedStyle(container, null).getPropertyValue('max-width'));
+      if (!isNaN(maxWidth)) modalEditBox.querySelector('.val-box-size').innerHTML = maxWidth;
     } // Animate Box 
 
 
@@ -17427,6 +17449,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
 
 
@@ -23427,6 +23531,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
 
@@ -23435,7 +23540,6 @@ class HtmlUtil {
     doc.write(this.getIframeHtml()); // use the same html as viewhtmllarger
 
     doc.close();
-    util.showModal(viewhtmlnormal, true, null, false);
   }
 
   viewHtmlLarger() {
@@ -60262,15 +60366,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">
+                                <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>
@@ -60884,6 +61027,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', () => {
@@ -60894,17 +61067,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
 
 
@@ -69689,103 +70025,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;
 
-        this.builder.uo.saveForUndo(); // let currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
+            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]);
 
-        let isInPx = false;
-        let currentLineHeight = elm.style.lineHeight;
 
-        if (currentLineHeight) {
-          if (currentLineHeight.indexOf('px') === -1) {
-            currentLineHeight = parseFloat(currentLineHeight);
+          let isInPx = false;
+          let currentLineHeight = elm.style.lineHeight;
+
+          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
@@ -69806,60 +70207,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
@@ -72950,6 +73409,192 @@ 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'
@@ -73026,6 +73671,11 @@ class ContentBuilder {
       this.opts.cols = ['col-md-1', 'col-md-2', 'col-md-3', 'col-md-4', 'col-md-5', 'col-md-6', 'col-md-7', 'col-md-8', 'col-md-9', 'col-md-10', 'col-md-11', 'col-md-12'];
       this.opts.colequal = [];
       this.opts.colsizes = [];
+    } else if (this.opts.framework === 'tailwind') {
+      this.opts.row = 'flex flex-col md:flex-row';
+      this.opts.cols = ['w-full md:w-1/12 px-4', 'w-full md:w-2/12 px-4', 'w-full md:w-3/12 px-4', 'w-full md:w-4/12 px-4', 'w-full md:w-5/12 px-4', 'w-full md:w-6/12 px-4', 'w-full md:w-7/12 px-4', 'w-full md:w-8/12 px-4', 'w-full md:w-9/12 px-4', 'w-full md:w-10/12 px-4', 'w-full md:w-11/12 px-4', 'w-full px-4'];
+      this.opts.colequal = [];
+      this.opts.colsizes = [];
     } else if (this.opts.framework === 'foundation') {
       this.opts.row = 'row';
       this.opts.cols = ['large-1 columns', 'large-2 columns', 'large-3 columns', 'large-4 columns', 'large-5 columns', 'large-6 columns', 'large-7 columns', 'large-8 columns', 'large-9 columns', 'large-10 columns', 'large-11 columns', 'large-12 columns'];
@@ -73746,10 +74396,10 @@ class ContentBuilder {
       }
     }
 
-    this.builder.cleanHtmlFormatting = true;
+    this.cleanHtmlFormatting = true;
     let outputHtml = htmlutil.readHtml(area); //for view=false
 
-    this.builder.cleanHtmlFormatting = false;
+    this.cleanHtmlFormatting = false;
     return outputHtml;
   } // ContentBox