@innovastudio/contentbox 1.0.55 → 1.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.0.55",
+  "version": "1.0.59",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -38,8 +38,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@ashthornton/asscroll": "^2.0.4",
-    "@innovastudio/contentbuilder": "^1.0.73",
+    "@innovastudio/contentbuilder": "^1.0.78",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",

package/public/contentbox/contentbox.esm.js

@@ -278,6 +278,26 @@ const prepareSvgIcons$1 = builder => {
             <symbol viewBox="0 0 2048.0 2048.0" id="icon-snippets"><g id="document" transform="matrix(1,0,0,1,1024.0,1024.0)">			<path d="M-727.581,329.502 L318.058,329.502 L318.058,-527.853 L-727.581,-527.853 L-727.581,329.502 Z " fill="#ffffff" fill-opacity="1.00" stroke-width="85.63" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" />			<path d="M-347.749,652.594 L697.89,652.594 L697.89,-204.761 L-347.749,-204.761 L-347.749,652.594 Z " fill="#ffffff" fill-opacity="1.00" stroke-width="85.63" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" />		</g></symbol>
             <symbol viewBox="0 0 512 512" id="ion-ios-copy-outline"><path d="M304 96h-16v80h80v-16h-64z"></path><path d="M325.3 64H160v48h-48v336h240v-48h48V139l-74.7-75zM336 432H128V128h32v272h176v32zm48-48H176V80h142.7l65.3 65.6V384z"></path></symbol>
                 
+            <symbol viewBox="0 0 24 24" id="icon-arrow-bar-to-up" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <line x1="12" y1="10" x2="12" y2="20" />
+                <line x1="12" y1="10" x2="16" y2="14" />
+                <line x1="12" y1="10" x2="8" y2="14" />
+                <line x1="4" y1="4" x2="20" y2="4" />
+            </symbol>
+            <symbol viewBox="0 0 24 24" id="icon-arrow-bar-to-down" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <line x1="4" y1="20" x2="20" y2="20" />
+                <line x1="12" y1="14" x2="12" y2="4" />
+                <line x1="12" y1="14" x2="16" y2="10" />
+                <line x1="12" y1="14" x2="8" y2="10" />
+            </symbol>
+            <symbol viewBox="0 0 24 24" id="icon-space-between" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <line x1="4" y1="4" x2="20" y2="4" />
+                <line x1="4" y1="20" x2="20" y2="20" />
+            </symbol>
+
             </defs>
         </svg>`;
   const builderStuff = builder.builderStuff;
@@ -7987,7 +8007,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') + ':</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>';
-    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: column;">' + '<div style="padding-top:20px;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: 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>' + '<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') + '</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>' + '<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:20px;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>' + '<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') + '</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$G.appendHtml(builderStuff, html); // Box Tool
 
     this.builder.boxTool = builderStuff.querySelector('#divBoxTool');
@@ -8250,6 +8270,62 @@ class EditBox {
 
       this.builder.settings.onChange();
     });
+    const btnContentJustify = modalEditBox.querySelectorAll('.cmd-content-justify');
+    btnContentJustify.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        let s = btn.getAttribute('data-value');
+        let activeBox = this.builder.activeBox;
+        let container = activeBox.querySelector('.is-container');
+        container.style.justifyContent = s;
+        let btnPos = modalEditBox.querySelectorAll('.cmd-content-justify');
+        btnPos.forEach(btn => {
+          dom$G.removeClass(btn, 'on');
+        });
+        dom$G.addClass(btn, 'on'); //Trigger Change event
+
+        this.builder.settings.onChange();
+      });
+    });
+    const btnContentHeight = modalEditBox.querySelectorAll('.cmd-content-height');
+    const divContentJustify = modalEditBox.querySelector('.div-content-justify');
+    btnContentHeight.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        let s = btn.getAttribute('data-value');
+        let activeBox = this.builder.activeBox;
+        let container = activeBox.querySelector('.is-container');
+
+        if (s === '') {
+          container.style.height = '';
+          container.style.display = '';
+          container.style.flexDirection = '';
+          container.style.justifyContent = '';
+          divContentJustify.style.display = 'none';
+        }
+
+        if (s === '100') {
+          container.style.height = '100%';
+          container.style.display = 'flex';
+          container.style.flexDirection = 'column';
+          container.style.justifyContent = 'space-between';
+          divContentJustify.style.display = 'block';
+          let btnPos = modalEditBox.querySelectorAll('.cmd-content-justify');
+          btnPos.forEach(btn => {
+            dom$G.removeClass(btn, 'on');
+          });
+          dom$G.addClass(modalEditBox.querySelector('.cmd-content-justify[data-value="space-between"]'), 'on');
+        }
+
+        let btnPos = modalEditBox.querySelectorAll('.cmd-content-height');
+        btnPos.forEach(btn => {
+          dom$G.removeClass(btn, 'on');
+        });
+        dom$G.addClass(btn, 'on'); //Trigger Change event
+
+        this.builder.settings.onChange();
+      });
+    });
     const btnBoxContentPos = modalEditBox.querySelectorAll('.cmd-box-content-pos');
     btnBoxContentPos.forEach(btn => {
       btn.addEventListener('click', () => {
@@ -9332,6 +9408,14 @@ class EditBox {
       }
     }
 
+    modalEditBox.querySelector('#chkOptimizeTextSize').checked = false;
+
+    if (container) {
+      if (dom$G.hasClass(container, 'v2')) {
+        modalEditBox.querySelector('#chkOptimizeTextSize').checked = true;
+      }
+    }
+
     dom$G.addClass(activeBox, 'box-active');
     this.builder.showModal(modalEditBox);
     const inpBoxSize = modalEditBox.querySelector('.inp-box-size');
@@ -9504,6 +9588,42 @@ class EditBox {
     } else {
       chkBoxAddText.style.display = 'flex';
       chkBoxRemoveText.style.display = 'none';
+    } // Content Height & Justify
+
+
+    let btnContentHeight = modalEditBox.querySelectorAll('.cmd-content-height');
+    let divContentJustify = modalEditBox.querySelector('.div-content-justify');
+    btnContentHeight.forEach(btn => {
+      dom$G.removeClass(btn, 'on');
+    });
+    let btnContentJustify = modalEditBox.querySelectorAll('.cmd-content-justify');
+    btnContentJustify.forEach(btn => {
+      dom$G.removeClass(btn, 'on');
+    });
+
+    if (container) {
+      if (container.style.height) {
+        if (container.style.height === '100%') {
+          dom$G.addClass(modalEditBox.querySelector('.cmd-content-height[data-value="100"]'), 'on');
+        }
+
+        divContentJustify.style.display = 'block';
+
+        if (container.style.justifyContent === 'flex-start') {
+          dom$G.addClass(modalEditBox.querySelector('.cmd-content-justify[data-value="flex-start"]'), 'on');
+        }
+
+        if (container.style.justifyContent === 'flex-end') {
+          dom$G.addClass(modalEditBox.querySelector('.cmd-content-justify[data-value="flex-end"]'), 'on');
+        }
+
+        if (container.style.justifyContent === 'space-between') {
+          dom$G.addClass(modalEditBox.querySelector('.cmd-content-justify[data-value="space-between"]'), 'on');
+        }
+      } else {
+        dom$G.addClass(modalEditBox.querySelector('.cmd-content-height[data-value=""]'), 'on');
+        divContentJustify.style.display = 'none';
+      }
     }
   } //edit
 
@@ -21065,8 +21185,8 @@ const renderQuickAdd = builder => {
     const html = `<div class="is-pop quickadd arrow-right" style="z-index:10003;">
         <div class="is-pop-close" style="display:none;z-index:1;width:40px;height:40px;position:absolute;top:0px;right:0px;box-sizing:border-box;padding:0;line-height:40px;font-size: 12px;color:#777;text-align:center;cursor:pointer;"><svg class="is-icon-flex" style="width:40px;height:40px;"><use xlink:href="#ion-ios-close-empty"></use></svg></div>
         <div class="is-pop-tabs">
-            <div class="is-pop-tab-item active" data-value="left">${util.out('Add to Left')}</div>
-            <div class="is-pop-tab-item" data-value="right">${util.out('Add to Right')}</div>
+            <div class="is-pop-tab-item" data-value="left">${util.out('Add to Left')}</div>
+            <div class="is-pop-tab-item active" data-value="right">${util.out('Add to Right')}</div>
         </div>
         <div style="padding:12px;display:flex;flex-direction:row;flex-flow: wrap;justify-content: center;align-items: center;">
             <button title="${util.out('Paragraph')}" class="add-paragraph"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-align-full"></use></svg></span>${util.out('Paragraph')}</button>
@@ -49000,9 +49120,9 @@ class Image {
                             <button title="4x6" data-crop-size="0.6666" style="width: 40px;height: 60px;">4x6</button>
                             <button title="${util.out('Free')}" data-crop-size="" style="width: 60px;height: 45px;">${util.out('Free')}</button>
                         </div>
-                        <div class="imageedit-preview" style="min-width:200px;">
+                        <div class="imageedit-preview" style="max-width:1000px;width:100%;max-height:550px;">
                         </div>
-                        <div style="margin-top:7px;text-align:right;align-self:flex-end;">
+                        <div style="margin-top:15px;text-align:right;align-self:flex-end;">
                             <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
                             <button title="${util.out('Apply')}" class="input-ok classic-primary">${util.out('Apply')}</button>
                         </div>
@@ -49536,6 +49656,7 @@ class Image {
         let preview = modalImageEdit.querySelector('.imageedit-preview');
         const maxW = 800;
         const maxH = 550;
+        preview.style.height = '';
 
         if (img.offsetWidth < maxW && img.offsetHeight < maxH) {
           preview.style.width = img.offsetWidth + 'px';
@@ -49550,7 +49671,7 @@ class Image {
           }
         }
 
-        preview.innerHTML = '<img src="" style="max-width:100%"/>';
+        preview.innerHTML = '<img src="" style="max-width:100%;object-fit:contain;height:100%;"/>';
         let imagePreview = modalImageEdit.querySelector('img');
         imagePreview.src = img.src;
         this.cropper = new Cropper(imagePreview, {
@@ -62930,6 +63051,7 @@ class Rte {
     let rteIconOptions;
     let rteCustomTagOptions;
     let rteZoomSlider;
+    let inpZoomSlider;
 
     if (!rteTool) {
       let customtag_button = '';
@@ -63036,7 +63158,13 @@ class Rte {
         html_iconrte = html_iconrte + `<button title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;
       }
       /* /Icon Buttons */
-      // <div class="is-draggable" style="width: 5px;height: 45pxpx;background:#fff;cursor: move;"></div>
+
+
+      let html_fontsizes = '';
+
+      for (j = 0; j < builder.opts.defaultFontSizes.length; j++) {
+        html_fontsizes += `<button title="${builder.opts.defaultFontSizes[j]}px" data-value="${builder.opts.defaultFontSizes[j]}">${builder.opts.defaultFontSizes[j]}</button>`;
+      } // <div class="is-draggable" style="width: 5px;height: 45pxpx;background:#fff;cursor: move;"></div>
       // <div style="height:55px;background:#fff;border-top:#f5f5f5 1px solid;">
       // </div>
 
@@ -63111,23 +63239,7 @@ class Rte {
                 <div>
                     <div class="is-label">${util.out('Font Size')}</div>
                     <div class="rte-fontsize-options" style="display: flex;flex-flow: wrap;">
-                        <button title="14px" data-value="14">14</button>
-                        <button title="16px" data-value="16">16</button>
-                        <button title="18px" data-value="18">18</button>
-                        <button title="21px" data-value="21">21</button>
-                        <button title="24px" data-value="24">24</button>
-                        <!--<button title="28px" data-value="28">28</button>-->
-                        <button title="32px" data-value="32">32</button>
-                        <!--<button title="38px" data-value="38">38</button>-->
-                        <button title="48px" data-value="48">48</button>
-                        <!--<button title="60px" data-value="60">60</button>-->
-                        <button title="76px" data-value="76">76</button>
-                        <button title="96px" data-value="96">96</button>
-
-                        <button title="120px" data-value="120">120</button>
-                        <!--<button title="160px" data-value="160">160</button>-->
-                        <button title="200px" data-value="200">200</button>
-                        <button title="300px" data-value="300">300</button>
+                        ${html_fontsizes}
 
                         <button title="${util.out('Decrease')}" data-value="-" style="font-size:13px">-</button>
                         <button title="${util.out('Increase')}" data-value="+" style="font-size:13px">+</button>
@@ -63166,6 +63278,16 @@ class Rte {
                 </div>
             </div>
 
+            <div class="is-modal viewzoom">
+                <div class="is-modal-content" style="max-width:250px;height:150px;display:flex;flex-flow:column;justify-content:center;">
+                    <div class="is-modal-bar is-draggable">${util.out('Zoom')}</div>
+                
+                    <div style="display:flex;flex-wrap:wrap;width:100%;padding-top:32px;">
+                        <input type="range" min="50" max="100" value="1" class="inp-zoom-slider is-rangeslider">
+                    </div>
+                </div>
+            </div>
+
             <div class="is-modal insertimage">
                 <div class="is-modal-content" style="max-width:560px;">
                     <div class="is-browse-area">
@@ -63226,7 +63348,8 @@ class Rte {
       rteZoomOptions = builderStuff.querySelector('.rte-zoom-options');
       rteIconOptions = builderStuff.querySelector('.rte-icon-options');
       rteCustomTagOptions = builderStuff.querySelector('.rte-customtag-options');
-      rteZoomSlider = builderStuff.querySelector('.rte-zoom-slider'); // Prepare for tooltip
+      rteZoomSlider = builderStuff.querySelector('.rte-zoom-slider');
+      inpZoomSlider = builderStuff.querySelector('.inp-zoom-slider'); // Prepare for tooltip
 
       let elms = rteTool.querySelectorAll('[title]');
       Array.prototype.forEach.call(elms, elm => {
@@ -63288,6 +63411,7 @@ class Rte {
     this.rteIconOptions = rteIconOptions;
     this.rteCustomTagOptions = rteCustomTagOptions;
     this.rteZoomSlider = rteZoomSlider;
+    this.inpZoomSlider = inpZoomSlider;
     this.positionToolbar(); // Formatting
 
     let btnRteFormatting = builderStuff.querySelectorAll('button.rte-formatting');
@@ -64039,6 +64163,91 @@ class Rte {
           this.builder.onZoomEnd(scale);
         }
       }, 300);
+    }; // Zoom Modal
+
+
+    this.inpZoomSlider.onfocus = () => {
+      if (this.builder.onZoomStart) {
+        this.builder.onZoomStart();
+      }
+
+      this.inpZoomSlider.blur();
+    };
+
+    this.inpZoomSlider.oninput = () => {
+      //scale: 0.5 - 1
+      //val: 50 - 100
+      let val = this.inpZoomSlider.value;
+      let scale = val / 100;
+      this.builder.opts.zoom = scale;
+      localStorage.setItem('_zoom', scale); // Save
+      // setZoomOnArea
+
+      this.builder.setZoomOnArea(); // hide tools
+
+      /*
+      let tools = this.builderStuff.querySelectorAll('.is-tool');
+      Array.prototype.forEach.call(tools, (tool) => {
+          tool.style.display = '';
+      });
+       let tool = this.builderStuff.querySelector('.is-column-tool');
+      tool.style.display = 'none';
+       tools = document.querySelectorAll('.is-row-tool');
+      tools.forEach(tool=>{
+          tool.style.display = 'none';
+      });
+       tools = document.querySelectorAll('.is-rowadd-tool');
+      tools.forEach(tool=>{
+          tool.style.opacity = 0;
+      });
+      */
+
+      if (this.builder.onZoom) {
+        let val = this.inpZoomSlider.value;
+        let scale = val / 100;
+        this.builder.onZoom(scale);
+      }
+    };
+
+    this.inpZoomSlider.onchange = () => {
+      setTimeout(() => {
+        // setZoomOnControl
+        if (this.builder.opts.page !== '') {
+          const wrapper = document.querySelector(this.builder.opts.page);
+          this.builder.setZoomOnControl(wrapper);
+        } else {
+          const builders = document.querySelectorAll(this.builder.opts.container);
+          builders.forEach(builder => {
+            this.builder.setZoomOnControl(builder);
+          });
+        } // show & reposition
+
+        /*
+        this.builder.elmTool.repositionElementTool();
+         let col = this.builder.activeCol;
+        let tool = this.builderStuff.querySelector('.is-column-tool');
+        tool.style.display = '';
+        tool.style.top = (col.getBoundingClientRect().top - 29 + window.pageYOffset) + 'px';
+        tool.style.left = (col.getBoundingClientRect().left - 1) + 'px';
+         let tools = document.querySelectorAll('.is-row-tool');
+        tools.forEach(tool=>{
+            tool.style.display = '';
+        });
+         tools = document.querySelectorAll('.is-rowadd-tool');
+        tools.forEach(tool=>{
+            tool.style.opacity = '';
+        });
+        */
+
+
+        if (this.builder.onZoomEnd) {
+          let val = this.inpZoomSlider.value;
+          let scale = val / 100;
+          this.builder.onZoomEnd(scale);
+        }
+
+        this.rteZoomSlider.value = this.inpZoomSlider.value;
+      }, 300);
     }; // Text Settings
 
 
@@ -67055,6 +67264,13 @@ class Rte {
     }
   }
 
+  viewZoom() {
+    if (this.builder.onZoomOpen) this.builder.onZoomOpen();
+    this.inpZoomSlider.value = this.builder.opts.zoom * 100;
+    const modal = this.builderStuff.querySelector('.viewzoom');
+    this.util.showModal(modal, false, null, false);
+  }
+
 }
 
 const dom$4 = new Dom();
@@ -67845,6 +68061,7 @@ class ContentBuilder {
       clearPreferences: false,
       toolbarAddSnippetButton: false,
       animateModal: true,
+      defaultFontSizes: [16, 17, 18, 19, 24, 32, 48, 76, 96, 120, 200, 300],
       fontSizeClassValues: [12, 14, 15, 16, 17, 18, 19, 21, 24, 28, 32, 35, 38, 42, 46, 48, 50, 54, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 104, 108, 112, 116, 120, 124, 128, 132, 136, 140, 144, 148, 152, 156, 160, 164, 168, 172, 176, 180, 184, 188, 192, 196, 200, 204, 208, 212, 216, 220, 224, 228, 232, 236, 240, 244, 248, 252, 256, 260, 264, 268, 272, 276, 280, 284, 288, 292, 296, 300, 304, 308, 312, 316, 320, 324, 328, 332, 336, 340, 344, 348, 352, 356, 360, 364, 368, 372, 376, 380, 384, 388, 392, 396, 400],
 
       /* If not empty, applying font size will apply class: size-12, size-14, and so on. All responsive, defined in content.css */
@@ -69506,6 +69723,10 @@ class ContentBuilder {
     this.preferences.view();
   }
 
+  viewZoom() {
+    this.rte.viewZoom();
+  }
+
   loadSnippets(snippetFile) {
     if (this.preview) return;
     let snippetPanel = document.querySelector(this.opts.snippetList);
@@ -74028,6 +74249,9 @@ class ContentBox {
         }
       },
       onZoomEnd: () => {
+        const section = this.wrapperEl.querySelector('.is-section');
+        if (!section) return; // empty content
+
         this.addSpace();
         let elm = document.querySelector('.is-section-tool[data-section-active]');
 
@@ -74528,7 +74752,14 @@ class ContentBox {
   rePositionTool() {
     let rowActive = this.wrapperEl.querySelector('.row-active'); // when zooming, there should be a focused row/col
 
-    const box = dom.parentsHasClass(rowActive, 'is-box');
+    let box;
+
+    if (rowActive) {
+      box = dom.parentsHasClass(rowActive, 'is-box');
+    } else {
+      box = this.activeBox;
+    }
+
     this.positionTool(box);
   }
 
@@ -74807,6 +75038,10 @@ class ContentBox {
     return html;
   }
 
+  viewZoom() {
+    this.editor.viewZoom();
+  }
+
   destroy() {
     document.removeEventListener('click', this.doDocumentClick, false);
     window.removeEventListener('scroll', this.doWindowScroll, false);