@innovastudio/contentbox 1.2.2 → 1.2.5

package/public/contentbox/contentbox.esm.js

@@ -8058,7 +8058,7 @@ class EditBox {
     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') + ': &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>' + '<button title="' + out('Not Set') + '" class="cmd-box-textcolor" data-value="" style="border-left:none;">' + out('Not Set') + '</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>' + '<button title="' + out('Not Set') + '" class="cmd-box-textalign" data-value="" style="border-left:none;">' + out('Not Set') + '</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>' + '';
+    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>' + '<button title="' + out('Not Set') + '" class="cmd-box-textcolor" data-value="" style="border-left:none;">' + out('Not Set') + '</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>' + '<button title="' + out('Not Set') + '" class="cmd-box-textalign" data-value="" style="border-left:none;">' + out('Not Set') + '</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('Decrease') + '" class="cmd-box-overlayopacity" data-value="-" style="width:40px;border-left:none;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-overlayopacity" data-value="+" style="width:40px;">+</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$K.appendHtml(builderStuff, html); // Box Tool
 
     this.builder.boxTool = builderStuff.querySelector('#divBoxTool');
@@ -9177,7 +9177,7 @@ class EditBox {
       let overlayColor = overlayBg.querySelector('.is-overlay-color');
 
       if (!overlayColor) {
-        overlayBg.insertAdjacentHTML('beforeend', '<div class="is-overlay-color" style="opacity:0.1"></div>');
+        overlayBg.insertAdjacentHTML('beforeend', `<div class="is-overlay-color ${this.builder.cssClasses.opacity.opacity_5}"></div>`);
         overlayColor = overlayBg.querySelector('.is-overlay-color');
       }
 
@@ -9190,8 +9190,17 @@ class EditBox {
         }
 
         if (s === '') {
-          overlayColor.parentNode.removeChild(overlayColor);
+          let overlayColor = overlayBg.querySelector('.is-overlay-color');
+          if (overlayColor) overlayColor.parentNode.removeChild(overlayColor);
         } else {
+          // re-cehck because overlayColor can be removed here
+          let overlayColor = overlayBg.querySelector('.is-overlay-color');
+
+          if (!overlayColor) {
+            overlayBg.insertAdjacentHTML('beforeend', `<div class="is-overlay-color ${this.builder.cssClasses.opacity.opacity_5}"></div>`);
+            overlayColor = overlayBg.querySelector('.is-overlay-color');
+          }
+
           overlayColor.style.backgroundColor = s;
         }
 
@@ -10298,6 +10307,44 @@ class EditBox {
     this.builder.settings.onRender();
   }
 
+  setElementClass(element, command, classes, defaultClass) {
+    let newClassName;
+
+    for (let i = 0; i < Object.keys(classes).length; i++) {
+      let className = Object.values(classes)[i];
+
+      if (dom$K.hasClass(element, className)) {
+        if (command === '+') {
+          if (i + 1 === Object.keys(classes).length) return;
+          newClassName = Object.values(classes)[i + 1];
+          break;
+        } else if (command === '-') {
+          if (i - 1 < 0) return;
+          newClassName = Object.values(classes)[i - 1];
+          break;
+        }
+      }
+    }
+
+    if (newClassName) {
+      for (let i = 0; i < Object.keys(classes).length; i++) {
+        let className = Object.values(classes)[i];
+        dom$K.removeClass(element, className);
+      }
+
+      dom$K.addClass(element, newClassName);
+    } else {
+      dom$K.addClass(element, defaultClass);
+    }
+  }
+
+  removeElementClass(element, classes) {
+    for (let i = 0; i < Object.keys(classes).length; i++) {
+      let className = Object.values(classes)[i];
+      dom$K.removeClass(element, className);
+    }
+  }
+
   boxOverlayOpacity(s) {
     let activeBox = this.builder.activeBox;
     let overlay = activeBox.querySelector('.is-overlay');
@@ -10306,29 +10353,43 @@ class EditBox {
 
     if (!overlayColor) {
       let overlayBg = overlay.querySelector('.is-overlay-bg');
-      overlayBg.insertAdjacentHTML('afterbegin', '<div class="is-overlay-color" style="opacity:0.1"></div>');
+      overlayBg.insertAdjacentHTML('afterbegin', `<div class="is-overlay-color ${this.builder.cssClasses.opacity.opacity_5}"></div>`);
       overlayColor = overlay.querySelector('.is-overlay-color');
     }
 
-    if (s === '+') {
-      overlayColor.style.display = 'block';
-      let opacity = overlayColor.style.opacity;
-      if (opacity === 0.01) overlayColor.style.opacity = 0.025;else if (opacity === 0.025) overlayColor.style.opacity = 0.04;else if (opacity === 0.04) overlayColor.style.opacity = 0.055;else if (opacity === 0.055) overlayColor.style.opacity = 0.07;else if (opacity === 0.07) overlayColor.style.opacity = 0.085;else if (opacity === 0.085) overlayColor.style.opacity = 0.1;else if (opacity === 0.1) overlayColor.style.opacity = 0.125;else if (opacity === 0.125) overlayColor.style.opacity = 0.15;else if (opacity === 0.15) overlayColor.style.opacity = 0.2;else if (opacity === 0.2) overlayColor.style.opacity = 0.25;else if (opacity === 0.25) overlayColor.style.opacity = 0.3;else if (opacity === 0.3) overlayColor.style.opacity = 0.35;else if (opacity === 0.35) overlayColor.style.opacity = 0.4;else if (opacity === 0.4) overlayColor.style.opacity = 0.45;else if (opacity === 0.45) overlayColor.style.opacity = 0.5;else if (opacity === 0.5) overlayColor.style.opacity = 0.55;else if (opacity === 0.55) overlayColor.style.opacity = 0.6;else if (opacity === 0.6) overlayColor.style.opacity = 0.6;else overlayColor.style.opacity = 0.15;
-    }
+    if (this.builder.useCssClasses) {
+      const classes = this.builder.cssClasses.opacity;
 
-    if (s === '-') {
-      overlayColor.style.display = 'block';
-      let opacity = overlayColor.style.opacity;
+      if (s === '0') {
+        this.removeElementClass(overlayColor, classes);
+        dom$K.addClass(overlayColor, classes.opacity_0);
+      } else {
+        this.setElementClass(overlayColor, s, classes, classes.opacity_10);
+      }
 
-      if (opacity === 0.01) {
-        overlayColor.style.opacity = 0.01;
-      } else if (opacity === 0.025) overlayColor.style.opacity = 0.01;else if (opacity === 0.04) overlayColor.style.opacity = 0.025;else if (opacity === 0.055) overlayColor.style.opacity = 0.04;else if (opacity === 0.07) overlayColor.style.opacity = 0.055;else if (opacity === 0.085) overlayColor.style.opacity = 0.07;else if (opacity === 0.1) overlayColor.style.opacity = 0.085;else if (opacity === 0.125) overlayColor.style.opacity = 0.1;else if (opacity === 0.15) overlayColor.style.opacity = 0.125;else if (opacity === 0.2) overlayColor.style.opacity = 0.15;else if (opacity === 0.25) overlayColor.style.opacity = 0.2;else if (opacity === 0.3) overlayColor.style.opacity = 0.25;else if (opacity === 0.35) overlayColor.style.opacity = 0.3;else if (opacity === 0.4) overlayColor.style.opacity = 0.35;else if (opacity === 0.45) overlayColor.style.opacity = 0.4;else if (opacity === 0.5) overlayColor.style.opacity = 0.45;else if (opacity === 0.55) overlayColor.style.opacity = 0.5;else if (opacity === 0.6) overlayColor.style.opacity = 0.55;else {
-        overlayColor.style.opacity = 0.15;
+      overlayColor.style.opacity = '';
+      overlayColor.style.display = '';
+    } else {
+      if (s === '+') {
+        // overlayColor.style.display = 'block';
+        let opacity = overlayColor.style.opacity;
+        if (!opacity) overlayColor.style.opacity = 0.1;else if (opacity === '0.01') overlayColor.style.opacity = 0.025;else if (opacity === '0.025') overlayColor.style.opacity = 0.04;else if (opacity === '0.04') overlayColor.style.opacity = 0.055;else if (opacity === '0.055') overlayColor.style.opacity = 0.07;else if (opacity === '0.07') overlayColor.style.opacity = 0.085;else if (opacity === '0.085') overlayColor.style.opacity = 0.1;else if (opacity === '0.1') overlayColor.style.opacity = 0.125;else if (opacity === '0.125') overlayColor.style.opacity = 0.15;else if (opacity === '0.15') overlayColor.style.opacity = 0.2;else if (opacity === '0.2') overlayColor.style.opacity = 0.25;else if (opacity === '0.25') overlayColor.style.opacity = 0.3;else if (opacity === '0.3') overlayColor.style.opacity = 0.35;else if (opacity === '0.35') overlayColor.style.opacity = 0.4;else if (opacity === '0.4') overlayColor.style.opacity = 0.45;else if (opacity === '0.45') overlayColor.style.opacity = 0.5;else if (opacity === '0.5') overlayColor.style.opacity = 0.55;else if (opacity === '0.55') overlayColor.style.opacity = 0.6;else if (opacity === '0.6') overlayColor.style.opacity = 0.6;else overlayColor.style.opacity = 0.15;
       }
-    }
 
-    if (s === '0') {
-      overlayColor.parentNode.removeChild(overlayColor);
+      if (s === '-') {
+        // overlayColor.style.display = 'block';
+        let opacity = overlayColor.style.opacity;
+        if (!opacity) overlayColor.style.opacity = 0.085;else if (opacity === '0.01') {
+          overlayColor.style.opacity = 0.01;
+        } else if (opacity === '0.025') overlayColor.style.opacity = 0.01;else if (opacity === '0.04') overlayColor.style.opacity = 0.025;else if (opacity === '0.055') overlayColor.style.opacity = 0.04;else if (opacity === '0.07') overlayColor.style.opacity = 0.055;else if (opacity === '0.085') overlayColor.style.opacity = 0.07;else if (opacity === '0.1') overlayColor.style.opacity = 0.085;else if (opacity === '0.125') overlayColor.style.opacity = 0.1;else if (opacity === '0.15') overlayColor.style.opacity = 0.125;else if (opacity === '0.2') overlayColor.style.opacity = 0.15;else if (opacity === '0.25') overlayColor.style.opacity = 0.2;else if (opacity === '0.3') overlayColor.style.opacity = 0.25;else if (opacity === '0.35') overlayColor.style.opacity = 0.3;else if (opacity === '0.4') overlayColor.style.opacity = 0.35;else if (opacity === '0.45') overlayColor.style.opacity = 0.4;else if (opacity === '0.5') overlayColor.style.opacity = 0.45;else if (opacity === '0.55') overlayColor.style.opacity = 0.5;else if (opacity === '0.6') overlayColor.style.opacity = 0.55;else {
+          overlayColor.style.opacity = 0.15;
+        }
+      }
+
+      if (s === '0') {
+        // overlayColor.parentNode.removeChild(overlayColor);
+        overlayColor.style.opacity = '0';
+      }
     }
 
     return false;
@@ -10395,12 +10456,7 @@ class EditBox {
       if (!overlayBg) {
         overlay.insertAdjacentHTML('beforeend', '<div class="is-overlay-bg"></div>');
         overlayBg = overlay.querySelector('.is-overlay-bg');
-      } // let overlayColor = overlayBg.querySelector('.is-overlay-color');
-      // if (!overlayColor) {
-      //     overlayBg.insertAdjacentHTML('beforeend', '<div class="is-overlay-color" style="opacity:0.1"></div>');
-      //     overlayColor = overlayBg.querySelector('.is-overlay-color');
-      // }
-
+      }
 
       overlayBg.style.backgroundImage = 'url(\'' + url + '\')';
       overlayBg.style.backgroundPosition = 50 + '%' + ' ' + 60 + '%'; //default
@@ -14967,6 +15023,11 @@ class Util {
       } // LATER: auto scroll
       // LATER: If image, then it needs time to load (resulting incorrect position), so hide element tool. 
 
+    }
+
+    if (this.builder.useCssClasses) {
+      let builderActive = document.querySelector('.builder-active');
+      if (builderActive) dom.contentReformat(builderActive, this.builder.cssClasses);
     } // Call onChange
 
 
@@ -15195,6 +15256,11 @@ class Util {
 
       columnTool = document.querySelector('.is-column-tool');
       columnTool.className = columnTool.className.replace('active', '');
+    }
+
+    if (this.builder.useCssClasses) {
+      let builderActive = document.querySelector('.builder-active');
+      if (builderActive) dom.contentReformat(builderActive, this.builder.cssClasses);
     } // Call onChange
 
 
@@ -18188,39 +18254,6 @@ class Dom {
     if (!removeEmptyStyleChildren || removeEmptyStyleChildren.length <= 0) {
       return;
     }
-  }
-
-  cleanEmptySpans(area) {
-    let spans = area.querySelectorAll('span');
-    const filter = Array.prototype.filter;
-    let children = filter.call(spans, element => {
-      return element.attributes.length === 0;
-    }); // Remove empty spans
-
-    if (children && children.length > 0) {
-      children.forEach(element => {
-        element.outerHTML = element.innerHTML;
-      });
-    } // Remove spans which have empty content
-
-
-    spans = area.querySelectorAll('span');
-    filter.call(spans, element => {
-      if (element.innerHTML === '') {
-        element.parentNode.removeChild(element);
-      }
-    }); // Recheck
-
-    spans = area.querySelectorAll('span');
-    children = filter.call(spans, element => {
-      return element.attributes.length === 0;
-    });
-
-    if (children && children.length > 0) {
-      this.cleanEmptySpans(area);
-    } else {
-      return;
-    }
   } // Font Size stuff
 
 
@@ -18297,7 +18330,7 @@ class Dom {
         }
       });
     });
-    this.cleanUnusedSpan(elm); // causes lost selection
+    this.cleanUnusedSpan(elm); // REVIEW (causes lost selection)
   }
 
   cleanSelection(selection) {
@@ -18309,40 +18342,148 @@ class Dom {
     selection.selectAllChildren(span);
     this.cleanElement(span);
   }
-
+  /*
   cleanUnusedSpan(span) {
-    if (!span.hasChildNodes()) {
-      return;
-    } // Direct children with no style
-
-
-    const children = Array.from(span.children).filter(element => {
-      if (element.getAttribute('style') === '' || element.style === null) {
-        element.removeAttribute('style');
+       if (!span.hasChildNodes()) {
+          return;
       }
+       // Direct children with no style
+      const children = Array.from(span.children).filter((element) => {
+          if (element.getAttribute('style') === '' || element.style === null) {
+              element.removeAttribute('style');
+          }
+          let unused = ( element.attributes.length === 0 || (element.attributes.length === 1 && element.hasAttribute('data-keep')));
+          return (element.nodeName.toLowerCase() === 'span' && unused);
+      });
+       if (children && children.length > 0) {
+          children.forEach((element) => { 
+              const text = document.createTextNode(element.textContent);
+              element.parentElement.replaceChild(text, element);
+          });
+          return;
+      }
+       // Deeper childrens
+      const cleanUnusedSpanChildren = Array.from(span.children).map((element) => {
+          return this.cleanUnusedSpan(element);
+      });
+       if (!cleanUnusedSpanChildren || cleanUnusedSpanChildren.length <= 0) {
+          return;
+      }
+  }
+  */
 
-      let unused = element.attributes.length === 0 || element.attributes.length === 1 && element.hasAttribute('data-keep');
-      return element.nodeName.toLowerCase() === 'span' && unused;
-    });
+
+  cleanUnusedSpan(area) {
+    let spans = area.querySelectorAll('span');
+    const filter = Array.prototype.filter;
+    let children = filter.call(spans, element => {
+      return element.attributes.length === 0;
+    }); // Remove empty spans
 
     if (children && children.length > 0) {
       children.forEach(element => {
-        const text = document.createTextNode(element.textContent);
-        element.parentElement.replaceChild(text, element);
+        element.outerHTML = element.innerHTML;
       });
-      return;
-    } // Deeper childrens
+    } // Remove spans which have empty content
 
 
-    const cleanUnusedSpanChildren = Array.from(span.children).map(element => {
-      return this.cleanUnusedSpan(element);
+    spans = area.querySelectorAll('span');
+    filter.call(spans, element => {
+      if (element.innerHTML === '') {
+        element.parentNode.removeChild(element);
+      }
+    }); // Recheck
+
+    spans = area.querySelectorAll('span');
+    children = filter.call(spans, element => {
+      return element.attributes.length === 0;
     });
 
-    if (!cleanUnusedSpanChildren || cleanUnusedSpanChildren.length <= 0) {
+    if (children && children.length > 0) {
+      this.cleanUnusedSpan(area);
+    } else {
       return;
     }
   }
 
+  contentReformat(area, cssClasses) {
+    this.replaceTag(area, 'b', cssClasses.fontWeight.defaultBold);
+    this.replaceTag(area, 'i', cssClasses.fontStyle.italic);
+    this.replaceTag(area, 'u', cssClasses.textDecoration.underline);
+    this.replaceTag(area, 'strike', cssClasses.textDecoration.linethrough);
+    this.replaceInline(area, 'font-weight', 'normal', cssClasses.fontWeight.defaultBold);
+    this.replaceInline(area, 'font-weight', 'bold', cssClasses.fontWeight.defaultBold);
+    this.replaceInline(area, 'font-weight', '600', cssClasses.fontWeight.semibold);
+    this.replaceInline(area, 'text-align', 'left', cssClasses.textAlign.left);
+    this.replaceInline(area, 'text-align', 'right', cssClasses.textAlign.right);
+    this.replaceInline(area, 'text-align', 'center', cssClasses.textAlign.center);
+    this.replaceInline(area, 'text-align', 'justify', cssClasses.textAlign.justify);
+    this.replaceInline(area, 'display', 'flex', cssClasses.display.flex);
+    this.replaceInline(area, 'justiify-content', 'flex-start', cssClasses.justifyContent.start);
+    this.replaceInline(area, 'justiify-content', 'flex-end', cssClasses.justifyContent.end);
+    this.replaceInline(area, 'justiify-content', 'center', cssClasses.justifyContent.center);
+    this.replaceInline(area, 'justiify-content', 'space-between', cssClasses.justifyContent.between);
+    this.replaceInline(area, 'flex-direction', 'column', cssClasses.flexDirection.column);
+    this.replaceInline(area, 'flex-direction', 'row', cssClasses.flexDirection.row);
+    this.replaceInline(area, 'align-items', 'flex-start', cssClasses.alignItems.start);
+    this.replaceInline(area, 'align-items', 'flex-end', cssClasses.alignItems.end);
+    this.replaceInline(area, 'align-items', 'center', cssClasses.alignItems.center);
+    this.replaceInline(area, 'text-transform', 'uppercase', cssClasses.textTransform.uppercase);
+    this.replaceInline(area, 'text-transform', 'lowercase', cssClasses.textTransform.lowercase);
+    this.replaceInline(area, 'text-transform', 'none', cssClasses.textTransform.normal);
+    this.replaceInline(area, 'line-height', '1', cssClasses.leading.leading_10);
+    this.replaceInline(area, 'line-height', '1.1', cssClasses.leading.leading_11);
+    this.replaceInline(area, 'line-height', '1.2', cssClasses.leading.leading_12);
+    this.replaceInline(area, 'line-height', '1.25', cssClasses.leading.leading_125);
+    this.replaceInline(area, 'line-height', '1.3', cssClasses.leading.leading_13);
+    this.replaceInline(area, 'line-height', '1.375', cssClasses.leading.leading_1375);
+    this.replaceInline(area, 'line-height', '1.4', cssClasses.leading.leading_14);
+    this.replaceInline(area, 'line-height', '1.5', cssClasses.leading.leading_15);
+    this.replaceInline(area, 'line-height', '1.6', cssClasses.leading.leading_16);
+    this.replaceInline(area, 'line-height', '1.625', cssClasses.leading.leading_1625);
+    this.replaceInline(area, 'line-height', '1.7', cssClasses.leading.leading_17);
+    this.replaceInline(area, 'line-height', '1.8', cssClasses.leading.leading_18);
+    this.replaceInline(area, 'line-height', '1.9', cssClasses.leading.leading_19);
+    this.replaceInline(area, 'line-height', '2', cssClasses.leading.leading_20);
+    this.replaceInline(area, 'line-height', '2.1', cssClasses.leading.leading_21);
+    this.replaceInline(area, 'line-height', '2.2', cssClasses.leading.leading_22);
+  }
+
+  replaceTag(area, tag, className) {
+    let elms = area.querySelectorAll(tag);
+    const filter = Array.prototype.filter;
+    let children = filter.call(elms, element => {
+      return element.attributes.length === 0;
+    });
+
+    if (children && children.length > 0) {
+      children.forEach(element => {
+        const span = document.createElement('span');
+        span.setAttribute('class', className);
+        span.innerHTML = element.innerHTML;
+        element.outerHTML = span.outerHTML;
+      });
+    }
+  }
+
+  replaceInline(builder, css, value, className) {
+    let elms = builder.querySelectorAll('*');
+    elms.forEach(elm => {
+      if (css === 'justiify-content') {
+        /*
+        For some reason, cannot use elm.style[css] for 'justify-content'
+        */
+        if (elm.style.justifyContent === `${value}`) {
+          this.addClass(elm, className);
+          elm.style.justifyContent = '';
+        }
+      } else if (elm.style[css] === `${value}`) {
+        this.addClass(elm, className);
+        elm.style[css] = '';
+      }
+    });
+  }
+
 }
 
 var js$1 = {exports: {}};
@@ -23912,7 +24053,7 @@ class HtmlUtil {
       } // Clean unused spans
 
 
-      dom$I.cleanUnusedSpan(content);
+      dom$I.cleanUnusedSpan(content); // REVIEW 
     }
 
     const util = this.builder.util;
@@ -76567,12 +76708,6 @@ class ContentBuilder {
           defaultBold: 'font-semibold',
           defaultNormal: 'font-light'
         },
-        textAlign: {
-          left: 'text-left',
-          center: 'text-center',
-          right: 'text-right',
-          justify: 'text-justify'
-        },
         fontStyle: {
           italic: 'italic',
           normal: 'not-italic'
@@ -76646,6 +76781,34 @@ class ContentBuilder {
           leading_29: 'leading-29',
           leading_30: 'leading-30'
         },
+        opacity: {
+          opacity_0: 'opacity-0',
+          opacity_2: 'opacity-2',
+          opacity_4: 'opacity-4',
+          opacity_5: 'opacity-5',
+          opacity_6: 'opacity-6',
+          opacity_8: 'opacity-8',
+          opacity_10: 'opacity-10',
+          opacity_12: 'opacity-12',
+          opacity_15: 'opacity-15',
+          opacity_20: 'opacity-20',
+          opacity_25: 'opacity-25',
+          opacity_30: 'opacity-30',
+          opacity_35: 'opacity-35',
+          opacity_40: 'opacity-40',
+          opacity_45: 'opacity-45',
+          opacity_50: 'opacity-50',
+          opacity_55: 'opacity-55',
+          opacity_60: 'opacity-60',
+          opacity_65: 'opacity-65',
+          opacity_70: 'opacity-70',
+          opacity_75: 'opacity-75',
+          opacity_80: 'opacity-80',
+          opacity_85: 'opacity-85',
+          opacity_90: 'opacity-90',
+          opacity_95: 'opacity-95',
+          opacity_100: 'opacity-100'
+        },
         padding: {
           all: {
             p_0: 'p-0',
@@ -76778,6 +76941,12 @@ class ContentBuilder {
           superscript: 'sup',
           subscript: 'sub'
         },
+        textAlign: {
+          left: 'text-left',
+          center: 'text-center',
+          right: 'text-right',
+          justify: 'text-justify'
+        },
         display: {
           flex: 'flex',
           block: 'block',
@@ -76811,7 +76980,7 @@ class ContentBuilder {
           stretch: 'items-stretch'
         }
       },
-      useCssClasses: false,
+      useCssClasses: true,
       useButtonPlugin: false
     }; // obj.preserveSelection = true; (can be set programmatically) to prevent click that clears selection on external custom modal.
 
@@ -77309,6 +77478,8 @@ class ContentBuilder {
     const builders = document.querySelectorAll(this.opts.container);
     Array.prototype.forEach.call(builders, builder => {
       this.applyBehaviorOn(builder); // includes setZoomOnControl
+
+      this.contentReformatOn(builder);
     }); // Call onRender to indicate content is ready for editing (applyBehavior has been applied)
 
     this.opts.onRender();
@@ -77316,6 +77487,10 @@ class ContentBuilder {
   } // applyBehavior
 
 
+  contentReformatOn(builder) {
+    if (this.opts.useCssClasses) dom$J.contentReformat(builder, this.opts.cssClasses);
+  }
+
   applyBehaviorOn(builder) {
     const util = this.util; //Make absolute
 
@@ -80861,7 +81036,6 @@ class ContentBox {
       undoContainerOnly: false,
       absolutePath: false,
       maxEmbedImageWidth: 1600,
-      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],
@@ -82812,6 +82986,294 @@ class ContentBox {
         }
       },
       cssInBody: false,
+      cssClasses: {
+        fontWeight: {
+          thin: 'font-thin',
+          extralight: 'font-extralight',
+          light: 'font-light',
+          normal: 'font-normal',
+          medium: 'font-medium',
+          semibold: 'font-semibold',
+          bold: 'font-bold',
+          extrabold: 'font-extrabold',
+          black: 'font-black',
+          defaultBold: 'font-semibold',
+          defaultNormal: 'font-light'
+        },
+        fontStyle: {
+          italic: 'italic',
+          normal: 'not-italic'
+        },
+        textDecoration: {
+          underline: 'underline',
+          linethrough: 'line-through',
+          normal: 'no-underline'
+        },
+        textTransform: {
+          uppercase: 'uppercase',
+          lowercase: 'lowercase',
+          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'
+        },
+        opacity: {
+          opacity_0: 'opacity-0',
+          opacity_2: 'opacity-2',
+          opacity_4: 'opacity-4',
+          opacity_5: 'opacity-5',
+          opacity_6: 'opacity-6',
+          opacity_8: 'opacity-8',
+          opacity_10: 'opacity-10',
+          opacity_12: 'opacity-12',
+          opacity_15: 'opacity-15',
+          opacity_20: 'opacity-20',
+          opacity_25: 'opacity-25',
+          opacity_30: 'opacity-30',
+          opacity_35: 'opacity-35',
+          opacity_40: 'opacity-40',
+          opacity_45: 'opacity-45',
+          opacity_50: 'opacity-50',
+          opacity_55: 'opacity-55',
+          opacity_60: 'opacity-60',
+          opacity_65: 'opacity-65',
+          opacity_70: 'opacity-70',
+          opacity_75: 'opacity-75',
+          opacity_80: 'opacity-80',
+          opacity_85: 'opacity-85',
+          opacity_90: 'opacity-90',
+          opacity_95: 'opacity-95',
+          opacity_100: 'opacity-100'
+        },
+        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'
+        },
+        textAlign: {
+          left: 'text-left',
+          center: 'text-center',
+          right: 'text-right',
+          justify: 'text-justify'
+        },
+        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: true,
+      useButtonPlugin: false,
 
       /* Old Version (backward compatible) */
       onAddSectionOpen: function () {},
@@ -83036,7 +83498,9 @@ class ContentBox {
       },
       undoContainerOnly: this.settings.undoContainerOnly,
       absolutePath: this.settings.absolutePath,
+      cssClasses: this.settings.cssClasses,
       useCssClasses: this.settings.useCssClasses,
+      useButtonPlugin: this.settings.useButtonPlugin,
       zoom: this.settings.zoom,
       onZoomStart: () => {
         // const wrapper = this.wrapperEl;