froala-editor/js/plugins/font_size.min.js

The next generation Javascript WYSIWYG HTML rich text editor made by devs for devs. High performance and modern design make it easy to use for developers and loved by users.

/*!
 * froala_editor v5.3.0 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2026 Froala Labs
 */

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(require("froala-editor")):"function"==typeof define&&define.amd?define(["froala-editor"],e):e(("undefined"!=typeof globalThis?globalThis:t||self).FroalaEditor)}(this,function(t){"use strict";Object.assign(t.POPUP_TEMPLATES,{"fontSize.custom":"[_INPUT_LAYER_]"}),Object.assign(t.DEFAULTS,{fontSize:["8","9","10","11","12","14","18","24","30","36","48","60","72","96","custom"],fontSizeCustomMin:8,fontSizeCustomMax:96,fontSizeSelection:!1,fontSizeDefaultSelection:"Font Size",fontSizeUnit:"px"}),t.PLUGINS.fontSize=function(p){var o=p.$;function i(t){p.format.applyStyle("font-size",t)}function d(){var t='\n      <div class="fr-font-size-custom-popup">\n        <div class="fr-input-line">\n          <input id="customFontSizeInput" class="fr-font-size-custom-input" type="text" placeholder="'.concat(p.language.translate("Enter font size")," (").concat(p.opts.fontSizeCustomMin,"-").concat(p.opts.fontSizeCustomMax,')" tabIndex="1" />\n           <div id="customFontSizeError" class="fr-font-size-error"></div>\n        </div>\n        <div class="fr-button-group">\n          <button type="button" class="fr-command fr-submit fr-font-size-custom-apply" data-cmd="fontSizeCustomApply" title="').concat(p.language.translate("Apply"),'" tabIndex="2">').concat(p.language.translate("Apply"),"</button>\n        </div>\n      </div>\n    "),t=p.popups.create("fontSize.custom",{input_layer:t});return p.events.on("commands.before",function(t){if("fontSizeCustomApply"===t){var e=(t=p.popups.get("fontSize.custom")).find("#customFontSizeInput")[0],t=t.find("#customFontSizeError"),e=e.value.trim(),n=p.opts.fontSizeCustomMin,o=p.opts.fontSizeCustomMax;if(""===e){if(t&&t.length)return t.text(p.language.translate("Please enter a valid number")),t.show(),!1}else if(/^(\d+\.?\d*|\.\d+)$/.test(e)){e=parseFloat(e);if(isNaN(e)){if(t&&t.length)return t.text(p.language.translate("Please enter a valid number")),t.show(),!1}else if(e<n||o<e){if(t&&t.length)return t.text(p.language.translate("Value must be between")+" ".concat(n," ").concat(p.language.translate("and")," ").concat(o)),t.show(),!1}else t&&t.length&&t.hide(),p.popups.hide("fontSize.custom"),i("".concat(e).concat(p.opts.fontSizeUnit)),p.undo.saveStep()}else if(t&&t.length)return t.text(p.language.translate("Please enter a valid number")),t.show(),!1}},!0),t}return{apply:i,refreshOnShow:function(t,e){var n=o(p.selection.element()).css("font-size");"pt"===p.opts.fontSizeUnit&&(n="".concat(Math.round(72*parseFloat(n,10)/96),"pt")),e.find(".fr-command.fr-active").removeClass("fr-active").attr("aria-selected",!1),e.find('.fr-command[data-param1="'.concat(n,'"]')).addClass("fr-active").attr("aria-selected",!0)},refresh:function(t){var e;p.opts.fontSizeSelection&&(e=p.helpers.getPX(o(p.selection.element()).css("font-size")),"pt"===p.opts.fontSizeUnit&&(e="".concat(Math.round(72*parseFloat(e,10)/96),"pt")),t.find("> span").text(e))},showCustomPopup:function(t){var e=p.selection.blocks(),n="",o=new Set;if(e&&0<e.length){for(var i=0;i<e.length;i++){var a=e[i],s=null;if(a.style&&a.style.fontSize)s=parseFloat(a.style.fontSize);else{for(var r=a.querySelectorAll("*"),l=0;l<r.length;l++)if(r[l].style&&r[l].style.fontSize){s=parseFloat(r[l].style.fontSize);break}null===s&&(a=window.getComputedStyle(a),s=parseFloat(a.fontSize))}null!==s&&o.add(s)}1===o.size&&(n=Array.from(o)[0],n=parseFloat(n.toFixed(2)),"pt"===p.opts.fontSizeUnit)&&(n=Math.round(72*n/96))}p.selection.save();var f,c=(c=p.popups.get("fontSize.custom"))||d(),u=(p.popups.isVisible("fontSize.custom")||((f=c.find("#customFontSizeError"))&&f.length&&(f.text(""),f.hide()),p.popups.refresh("fontSize.custom"),p.popups.setContainer("fontSize.custom",p.$tb),u=(t=(f=t&&t.length?t:p.$tb.find('[data-cmd="fontSize"]').first()).offset()).left+f.outerWidth()/2,t=t.top+f.outerHeight(),p.popups.show("fontSize.custom",u,t,f.outerHeight())),c.find("#customFontSizeInput"));0<u.length&&(u[0].value=n)}}},t.RegisterCommand("fontSizeCustomApply",{focus:!1,undo:!1}),t.RegisterCommand("fontSize",{type:"dropdown",title:"Font Size",displaySelection:function(t){return t.opts.fontSizeSelection},displaySelectionWidth:30,defaultSelection:function(t){return t.opts.fontSizeDefaultSelection},html:function(){for(var t='<ul class="fr-dropdown-list" role="presentation">',e=this.opts.fontSize,n=0;n<e.length;n++){var o,i=e[n];"custom"===i?(o=this.icon.create("fontSizeCustom"),t+='<li role="presentation"><a class="fr-command" tabIndex="-1" role="option" data-cmd="fontSize" data-param1="custom" title="'.concat(this.language.translate("Custom Font Size"),'">').concat(o,"</a></li>")):t+='<li role="presentation"><a class="fr-command" tabIndex="-1" role="option" data-cmd="fontSize" data-param1="'.concat(i).concat(this.opts.fontSizeUnit,'" title="').concat(i,'">').concat(i,"</a></li>")}return t+="</ul>"},callback:function(t,e,n){"custom"===e?this.fontSize.showCustomPopup(n):this.fontSize.apply(e)},refresh:function(t){this.fontSize.refresh(t)},refreshOnShow:function(t,e){this.fontSize.refreshOnShow(t,e)},plugin:"fontSize"}),t.DefineIcon("fontSize",{NAME:"text-height",SVG_KEY:"fontSize"}),t.DefineIcon("fontSizeCustom",{NAME:"edit",SVG_KEY:"edit"})});