UNPKG

froala-editor

Version:

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.

7 lines (6 loc) 8.3 kB
/*! * froala_editor v5.0.1 (https://www.froala.com/wysiwyg-editor) * License https://froala.com/wysiwyg-editor/terms/ * Copyright 2014-2026 Froala Labs */ !function(o,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("froala-editor")):"function"==typeof define&&define.amd?define(["froala-editor"],t):t(("undefined"!=typeof globalThis?globalThis:o||self).FroalaEditor)}(this,function(f){"use strict";Object.assign(f.POPUP_TEMPLATES,{"textColor.picker":"[_BUTTONS_][_TEXT_COLORS_][_CUSTOM_COLOR_]","backgroundColor.picker":"[_BUTTONS_][_BACKGROUND_COLORS_][_CUSTOM_COLOR_]"}),Object.assign(f.DEFAULTS,{colorsText:["#61BD6D","#1ABC9C","#54ACD2","#2C82C9","#9365B8","#475577","#CCCCCC","#41A85F","#00A885","#3D8EB9","#2969B0","#553982","#28324E","#000000","#F7DA64","#FBA026","#EB6B56","#E25041","#A38F84","#EFEFEF","#FFFFFF","#FAC51C","#F37934","#D14841","#B8312F","#7C706B","#D1D5D8","REMOVE"],colorsBackground:["#61BD6D","#1ABC9C","#54ACD2","#2C82C9","#9365B8","#475577","#CCCCCC","#41A85F","#00A885","#3D8EB9","#2969B0","#553982","#28324E","#000000","#F7DA64","#FBA026","#EB6B56","#E25041","#A38F84","#EFEFEF","#FFFFFF","#FAC51C","#F37934","#D14841","#B8312F","#7C706B","#D1D5D8","REMOVE"],colorsStep:7,colorsHEXInput:!0,colorsButtons:["colorsBack","|","-"]}),f.PLUGINS.colors=function(u){var d=u.$,a='<div class="fr-color-hex-layer fr-active fr-layer" id="fr-color-hex-layer- \n '.concat(u.id,'"><div class="fr-input-line"><input maxlength="9" id="[ID]"\n type="text" placeholder="').concat(u.language.translate("HEX Color"),'" \n tabIndex="1" aria-required="true"></div><div class="fr-action-buttons"><button \n type="button" class="fr-command fr-submit" data-cmd="[COMMAND]" tabIndex="2" role="button">\n ').concat(u.language.translate("OK"),"</button></div></div>");function n(o){for(var t="text"===o?u.opts.colorsText:u.opts.colorsBackground,e='<div class="fr-color-set fr-'.concat(o,'-color fr-selected-set">'),r=0;r<t.length;r++)0!==r&&r%u.opts.colorsStep==0&&(e+="<br>"),"REMOVE"!==t[r]?e+='<span class="fr-command fr-select-color" style="background:'.concat(t[r].toUpperCase(),';" \n tabIndex="-1" aria-selected="false" role="button" data-cmd="apply').concat(o,'Color" \n data-param1="').concat(t[r].toUpperCase(),'"><span class="fr-sr-only"> ').concat(u.language.translate("Color")).concat(t[r]," \n &nbsp;&nbsp;&nbsp;</span></span>"):e+='<span class="fr-command fr-select-color" data-cmd="apply'.concat(o,'Color"\n tabIndex="-1" role="button" data-param1="REMOVE" \n title="').concat(u.language.translate("Clear Formatting"),'">').concat(u.icon.create("remove"),' \n <span class="fr-sr-only"> ').concat(u.language.translate("Clear Formatting")," </span></span>");return"".concat(e,"</div>")}function s(o){var t=u.popups.get("".concat(o,"Color.picker")),e=d(u.selection.element()),r="background"===o?"background-color":"color",c=t.find(".fr-".concat(o,"-color .fr-select-color"));for(c.find(".fr-selected-color").remove(),c.removeClass("fr-active-item"),c.not('[data-param1="REMOVE"]').attr("aria-selected",!1);e.get(0)!==u.el;){if("transparent"!==e.css(r)&&"rgba(0, 0, 0, 0)"!==e.css(r)){var a=t.find(".fr-".concat(o,'-color .fr-select-color[data-param1="').concat(u.helpers.RGBToHex(e.css(r)),'"]'));a.append('<span class="fr-selected-color" aria-hidden="true">\uf00c</span>'),a.addClass("fr-active-item").attr("aria-selected",!0);break}e=e.parent()}var c=o,c=(n=u.popups.get("".concat(c,"Color.picker"))).find(".fr-".concat(c,"-color .fr-active-item")).attr("data-param1"),n=n.find(".fr-color-hex-layer input");c=c||"",n.length&&d(n.val(c).input).trigger("change")}function e(o){"REMOVE"!==o?u.format.applyStyle("background-color",u.helpers.HEXtoRGB(o)):u.format.removeStyle("background-color"),u.selection.save(),u.popups.hide("backgroundColor.picker"),u.selection.restore()}function r(o){"REMOVE"!==o?u.format.applyStyle("color",u.helpers.HEXtoRGB(o)):u.format.removeStyle("color"),u.selection.save(),u.popups.hide("textColor.picker"),u.selection.restore()}return{showColorsPopup:function(o){var t,e,r=u.$tb.find('.fr-command[data-cmd="'.concat(o,'"]')),c=u.popups.get("".concat(o,".picker"));(c=c||function(o){var t="";u.opts.toolbarInline&&0<u.opts.colorsButtons.length&&(t+='<div class="fr-buttons fr-colors-buttons fr-tabs">\n '.concat(u.button.buildList(u.opts.colorsButtons),"\n </div>"));var e="";t="textColor"===o?(u.opts.colorsHEXInput&&(e=a.replace(/\[ID\]/g,"fr-color-hex-layer-text-".concat(u.id)).replace(/\[COMMAND\]/g,"customTextColor")),{buttons:t,text_colors:n("text"),custom_color:e}):(u.opts.colorsHEXInput&&(e=a.replace(/\[ID\]/g,"fr-color-hex-layer-background-".concat(u.id)).replace(/\[COMMAND\]/g,"customBackgroundColor")),{buttons:t,background_colors:n("background"),custom_color:e});e=u.popups.create("".concat(o,".picker"),t);return function(i,p){u.events.on("popup.tab",function(o){var t,e,r,c,a,n,s,l=d(o.currentTarget);return!u.popups.isVisible(p)||!l.is("span, input, button")||(t=o.which,e=!0,f.KEYCODE.TAB===t?(r=i.find("span.fr-select-color"),(l.is(r.first())&&o.shiftKey||l.is(i.find("span.fr-submit"))&&!o.shiftKey)&&(r=i.find(".fr-buttons"),e=!u.accessibility.focusToolbar(r,!!o.shiftKey)),!1!==e&&((r=i.find("span.fr-select-color")).add(i.find("input")),r.add(i.find("button.fr-submit")),a=r.index(l),a=o.shiftKey?((a-1)%r.length+r.length)%r.length:(a+1)%r.length,a=r.get(a),u.events.disableBlur(),a.focus(),e=!1)):f.KEYCODE.ARROW_UP===t||f.KEYCODE.ARROW_DOWN===t||f.KEYCODE.ARROW_LEFT===t||f.KEYCODE.ARROW_RIGHT===t?l.is("span.fr-select-color")&&(a=(r=l.parent().find("span.fr-select-color")).index(l),c=u.opts.colorsStep,s=Math.floor(r.length/c),n=a%c,a=Math.floor(a/c)*c+n,n=s*c,f.KEYCODE.ARROW_UP===t?a=((a-c)%n+n)%n:f.KEYCODE.ARROW_DOWN===t?a=(a+c)%n:f.KEYCODE.ARROW_LEFT===t?a=((a-1)%n+n)%n:f.KEYCODE.ARROW_RIGHT===t&&(a=(a+1)%n),s=d(r.get(a)),u.events.disableBlur(),s.focus(),e=!1):f.KEYCODE.ENTER===t&&(u.button.exec(l),e=!1),!1===e&&(o.preventDefault(),o.stopPropagation()),e)},!0)}(e,"".concat(o,".picker")),e}(o)).hasClass("fr-active")||(u.undo.saveStep(),u.popups.setContainer("".concat(o,".picker"),u.$tb),null!=(e=u.popups.get("".concat(t="textColor"===o?"backgroundColor":"textColor",".picker")))&&e.hasClass("fr-active")?u.popups.hide("".concat(t,".picker")):u.selection.save(),s("textColor"===o?"text":"background"),r.isVisible()?(t=(e=u.button.getPosition(r)).left,e=e.top,u.popups.show("".concat(o,".picker"),t,e,r.outerHeight())):(u.position.forSelection(c),u.popups.show("".concat(o,".picker"))))},background:e,customColor:function(o){var t=u.popups.get("".concat(o,"Color.picker")).find(".fr-color-hex-layer input");t.length&&("background"===o?e:r)(t.val())},text:r,back:function(){u.popups.hide("textColor.picker"),u.popups.hide("backgroundColor.picker"),u.toolbar.showInline()}}},f.DefineIcon("textColor",{NAME:"tint",SVG_KEY:"textColor"}),f.RegisterCommand("textColor",{title:"Text Color",undo:!1,focus:!0,refreshOnCallback:!1,popup:!0,callback:function(){this.popups.isVisible("textColor.picker")?(this.$el.find(".fr-marker").length&&this.events.disableBlur(),this.popups.hide("textColor.picker")):this.colors.showColorsPopup("textColor")}}),f.RegisterCommand("applytextColor",{undo:!0,callback:function(o,t){this.colors.text(t)}}),f.RegisterCommand("customTextColor",{title:"OK",undo:!0,callback:function(){this.colors.customColor("text")}}),f.DefineIcon("backgroundColor",{NAME:"paint-brush",SVG_KEY:"backgroundColor"}),f.RegisterCommand("backgroundColor",{title:"Background Color",undo:!1,focus:!0,refreshOnCallback:!1,popup:!0,callback:function(){this.popups.isVisible("backgroundColor.picker")?(this.$el.find(".fr-marker").length&&this.events.disableBlur(),this.popups.hide("backgroundColor.picker")):this.colors.showColorsPopup("backgroundColor")}}),f.RegisterCommand("applybackgroundColor",{undo:!0,callback:function(o,t){this.colors.background(t)}}),f.RegisterCommand("customBackgroundColor",{title:"OK",undo:!0,callback:function(){this.colors.customColor("background")}}),f.DefineIcon("colorsBack",{NAME:"arrow-left",SVG_KEY:"back"}),f.RegisterCommand("colorsBack",{title:"Back",undo:!1,focus:!1,back:!0,refreshAfterCallback:!1,callback:function(){this.colors.back()}}),f.DefineIcon("remove",{NAME:"eraser",SVG_KEY:"remove"})});