smart-webcomponents-angular/source/smart.textarea.js

[](https://jqwidgets.com/license/)

/* Smart UI v23.1.19 (2025-06-17) 
Copyright (c) 2011-2024 jQWidgets. 
License: https://htmlelements.com/license/ */ //

(()=>{Smart("smart-text-area",class extends Smart.Input{static get properties(){return{users:{value:[],type:"array",reflectToAttribute:!1},resize:{value:"none",type:"string"},richText:{value:!1,type:"boolean"},enableHTMLEncode:{value:!0,type:"boolean"},minWidth:{value:0,type:"number"},minHeight:{value:0,type:"number"},toolbarOnFocus:{value:!1,type:"boolean"},dataSource:{value:[],type:"array",reflectToAttribute:!1},uploadSettings:{value:{url:{value:"",type:"string",reflectToAttribute:!1},removeUrl:{value:"",type:"string",reflectToAttribute:!1},existsUrl:{value:"",type:"string",reflectToAttribute:!1},name:{value:"userfile[]",type:"string",reflectToAttribute:!1},uploadMaxCount:{value:5,type:"number",reflectToAttribute:!1},uploadMaxSize:{value:2097152,type:"number",reflectToAttribute:!1},data:{value:null,type:"object",reflectToAttribute:!1},onUploadStarted:{value:null,type:"any",reflectToAttribute:!1},onUploadCompleted:{value:null,type:"any",reflectToAttribute:!1},onUploadRemove:{value:null,type:"any",reflectToAttribute:!1},onUploadError:{value:null,type:"any",reflectToAttribute:!1},onChange:{value:null,type:"any",reflectToAttribute:!1},onProgress:{value:null,type:"any",reflectToAttribute:!1},onAbort:{value:null,type:"any",reflectToAttribute:!1},onError:{value:null,type:"any",reflectToAttribute:!1},onSetHeaders:{value:null,type:"any",reflectToAttribute:!1}},reflectToAttribute:!1,type:"object"},toolbarItems:{value:["bold","italic","underline","strikethrough","fontsize","fontname","fontcolor","backgroundcolor","alignment","orderedlist","unorderedlist","checklist","hyperlink","image","tableheader","undo","redo","clearformat"],reflectToAttribute:!1,type:"array"},emojis:{value:[{value:"😄",listValue:"😄 smile"},{value:"😆",listValue:"😆 laughing"},{value:"😊",listValue:"😊 blush"},{value:"😃",listValue:"😃 smiley"},{value:"😏",listValue:"😏 smirk"},{value:"😍",listValue:"😍 heart_eyes"},{value:"😘",listValue:"😘 kissing_heart"},{value:"😚",listValue:"😚 kissing_closed_eyes"},{value:"😳",listValue:"😳 flushed"},{value:"😌",listValue:"😌 relieved"},{value:"😆",listValue:"😆 satisfied"},{value:"😁",listValue:"😁 grin"},{value:"😉",listValue:"😉 wink"},{value:"😀",listValue:"😀 grinning"},{value:"😗",listValue:"😗 kissing"},{value:"😙",listValue:"😙 kissing_smiling_eyes"},{value:"😛",listValue:"😛 stuck_out_tongue"},{value:"😴",listValue:"😴 sleeping"},{value:"😟",listValue:"😟 worried"},{value:"😦",listValue:"😦 frowning"},{value:"😧",listValue:"😧 anguished"},{value:"😮",listValue:"😮 open_mouth"},{value:"😬",listValue:"😬 grimacing"},{value:"😕",listValue:"😕 confused"},{value:"😯",listValue:"😯 hushed"},{value:"😑",listValue:"😑 expressionless"},{value:"😒",listValue:"😒 unamused"},{value:"😅",listValue:"😅 sweat_smile"},{value:"😓",listValue:"😓 sweat"},{value:"😥",listValue:"😥 disappointed_relieved"},{value:"😩",listValue:"😩 weary"},{value:"😔",listValue:"😔 pensive"},{value:"😞",listValue:"😞 disappointed"},{value:"😖",listValue:"😖 confounded"},{value:"😨",listValue:"😨 fearful"},{value:"😰",listValue:"😰 cold_sweat"},{value:"😣",listValue:"😣 persevere"},{value:"😢",listValue:"😢 cry"},{value:"😭",listValue:"😭 sob"},{value:"😂",listValue:"😂 joy"},{value:"😲",listValue:"😲 astonished"},{value:"😱",listValue:"😱 scream"},{value:"😫",listValue:"😫 tired_face"},{value:"😠",listValue:"😠 angry"},{value:"😡",listValue:"😡 rage"},{value:"😤",listValue:"😤 triumph"},{value:"😪",listValue:"😪 sleepy"},{value:"😋",listValue:"😋 yum"},{value:"😷",listValue:"😷 mask"},{value:"😎",listValue:"😎 sunglasses"},{value:"😵",listValue:"😵 dizzy_face"},{value:"👿",listValue:"👿 imp"},{value:"😈",listValue:"😈 smiling_imp"},{value:"😐",listValue:"😐 neutral_face"},{value:"😶",listValue:"😶 no_mouth"},{value:"😇",listValue:"😇 innocent"},{value:"👽",listValue:"👽 alien"},{value:"💛",listValue:"💛 yellow_heart"},{value:"💙",listValue:"💙 blue_heart"},{value:"💜",listValue:"💜 purple_heart"},{value:"❤️",listValue:"❤️ heart"},{value:"💚",listValue:"💚 green_heart"},{value:"💔",listValue:"💔 broken_heart"},{value:"💓",listValue:"💓 heartbeat"},{value:"💗",listValue:"💗 heartpulse"},{value:"💕",listValue:"💕 two_hearts"},{value:"💞",listValue:"💞 revolving_hearts"},{value:"💘",listValue:"💘 cupid"},{value:"💖",listValue:"💖 sparkling_heart"},{value:"✨",listValue:"✨ sparkles"},{value:"⭐",listValue:"⭐ star"},{value:"🌟",listValue:"🌟 star2"},{value:"💫",listValue:"💫 dizzy"},{value:"💥",listValue:"💥 boom"},{value:"💥",listValue:"💥 collision"},{value:"💢",listValue:"💢 anger"},{value:"❗",listValue:"❗ exclamation"},{value:"❓",listValue:"❓ question"},{value:"💤",listValue:"💤 zzz"},{value:"💨",listValue:"💨 dash"},{value:"💦",listValue:"💦 sweat_drops"},{value:"🎶",listValue:"🎶 notes"},{value:"🎵",listValue:"🎵 musical_note"},{value:"🔥",listValue:"🔥 fire"},{value:"💩",listValue:"💩 hankey"},{value:"💩",listValue:"💩 poop"},{value:"💩",listValue:"💩 shit"},{value:"👍",listValue:"👍 +1"},{value:"👍",listValue:"👍 thumbsup"},{value:"👎",listValue:"👎 +1"},{value:"👎",listValue:"👎 thumbsdown"},{value:"👌",listValue:"👌 ok_hand"},{value:"👊",listValue:"👊 facepunch"},{value:"✊",listValue:"✊ fist"},{value:"✌️",listValue:"✌️ v"},{value:"👋",listValue:"👋 wave"},{value:"✋",listValue:"✋ raised_hand"},{value:"👐",listValue:"👐 open_hands"},{value:"☝️",listValue:"☝️ point_up"},{value:"👇",listValue:"👇 point_down"},{value:"👈",listValue:"👈 point_left"},{value:"👉",listValue:"👉 point_right"},{value:"🙌",listValue:"🙌 raised_hands"},{value:"🙏",listValue:"🙏 pray"},{value:"👆",listValue:"👆 point_up_2"},{value:"👏",listValue:"👏 clap"},{value:"💪",listValue:"💪 muscle"},{value:"🤘",listValue:"🤘 metal"},{value:"🖕",listValue:"🖕 fu"},{value:"🚶",listValue:"🚶 walking"},{value:"🏃",listValue:"🏃 runner"},{value:"🏃",listValue:"🏃 running"},{value:"👫",listValue:"👫 couple"},{value:"👪",listValue:"👪 family"},{value:"👬",listValue:"👬 two_men_holding_hands"},{value:"👭",listValue:"👭 two_women_holding_hands"},{value:"💃",listValue:"💃 dancer"},{value:"👯",listValue:"👯 dancers"},{value:"🙆‍♀️",listValue:"🙆‍♀️ ok_woman"},{value:"🙅",listValue:"🙅 no_good"},{value:"💁",listValue:"💁 information_desk_person"},{value:"🙋",listValue:"🙋 raising_hand"},{value:"👰‍♀️",listValue:"👰‍♀️ bride_with_veil"},{value:"🙇",listValue:"🙇 bow"},{value:"💏",listValue:"💏 couplekiss"},{value:"💑",listValue:"💑 couple_with_heart"},{value:"💆",listValue:"💆 massage"},{value:"💇",listValue:"💇 haircut"},{value:"💅",listValue:"💅 nail_care"},{value:"👦",listValue:"👦 boy"},{value:"👧",listValue:"👧 girl"},{value:"👩",listValue:"👩 woman"},{value:"👨",listValue:"👨 man"},{value:"👶",listValue:"👶 baby"},{value:"👵",listValue:"👵 older_woman"},{value:"👴",listValue:"👴 older_man"},{value:"👲",listValue:"👲 man_with_gua_pi_mao"},{value:"👳‍♂️",listValue:"👳‍♂️ man_with_turban"},{value:"👷",listValue:"👷 construction_worker"},{value:"👮",listValue:"👮 cop"},{value:"👼",listValue:"👼 angel"},{value:"👸",listValue:"👸 princess"},{value:"😺",listValue:"😺 smiley_cat"},{value:"😸",listValue:"😸 smile_cat"},{value:"😻",listValue:"😻 heart_eyes_cat"},{value:"😽",listValue:"😽 kissing_cat"},{value:"😼",listValue:"😼 smirk_cat"},{value:"🙀",listValue:"🙀 scream_cat"},{value:"😿",listValue:"😿 crying_cat_face"},{value:"😹",listValue:"😹 joy_cat"},{value:"😾",listValue:"😾 pouting_cat"},{value:"👹",listValue:"👹 japanese_ogre"},{value:"👺",listValue:"👺 japanese_goblin"},{value:"🙈",listValue:"🙈 see_no_evil"},{value:"🙉",listValue:"🙉 hear_no_evil"},{value:"🙊",listValue:"🙊 speak_no_evil"},{value:"💂‍♂️",listValue:"💂‍♂️ guardsman"},{value:"💀",listValue:"💀 skull"},{value:"🐾",listValue:"🐾 feet"},{value:"👄",listValue:"👄 lips"},{value:"💋",listValue:"💋 kiss"},{value:"💧",listValue:"💧 droplet"},{value:"👂",listValue:"👂 ear"},{value:"👀",listValue:"👀 eyes"},{value:"👃",listValue:"👃 nose"},{value:"👅",listValue:"👅 tongue"},{value:"🔔",listValue:"🔔 bell"},{value:"🔕",listValue:"🔕 no_bell"},{value:"🎋",listValue:"🎋 tanabata_tree"},{value:"🎉",listValue:"🎉 tada"},{value:"🎊",listValue:"🎊 confetti_ball"},{value:"🔮",listValue:"🔮 crystal_ball"},{value:"♻️",listValue:"♻️ recycle"},{value:"🔚",listValue:"🔚 end"},{value:"🔛",listValue:"🔛 on"},{value:"🔜",listValue:"🔜 soon"}],type:"array",reflectToAttribute:!1}}}template(){return'<div id="inputContainer" role="presentation"><textarea class="smart-input" id=\'input\' readonly=\'[[readonly]]\' placeholder=\'[[placeholder]]\'  name=\'[[name]]\' value=\'{{value::keyup}}\' disabled=\'[[disabled]]\' aria-label="[[placeholder]]"></textarea><div id="editor"></div><span class="smart-hidden smart-hint" inner-h-t-m-l="[[hint]]" id="span"></span><div id="dropDownButton" tabindex=-1 class="smart-drop-down-button" role="button" aria-label="Toggle popup"><div id="arrow" class="arrow" aria-hidden="true"></div></div></div>'}_blurHandler(){const e=this;e.richText?e.removeAttribute("focus"):super._blurHandler()}_focusHandler(){const e=this;e.richText&&(e.$.editor.component.focus(),setTimeout((()=>{const t=e.$.editor.value;e.$.editor.selectionStart=t.length}))),super._focusHandler()}setHTML(e){const t=this;if(t.richText)return t.$.editor.value=e;this.value=e.replaceAll("<","&lt;").replaceAll(">","&gt;")}getHTML(){const e=this;return e.richText?e.$.editor?e.$.editor.component.getHTML():"":e.value}propertyChangedHandler(e,t,o){const a=this;"value"===e&&a.richText&&(a.$.editor.value=o),"richText"===e&&a.render(),"users"===e?(delete a._initMenu,a._mentionMenu&&(a._mentionPlugin&&a._mentionPlugin.destroy(),a._mentionMenu.remove(),a._initUsersMention()),a._renderMentionTrigger()):"resize"===e&&(a.richText?a.$.editor.querySelector(".smart-editor-editable").style.resize=o:a.$.input.style.resize=o,a._mentionTrigger&&("none"!==a.resize?a._mentionTrigger.style.right="10px":a._mentionTrigger.style.right="5px"))}detached(){const e=this;delete e._initMenu,e._mentionMenu&&e._mentionMenu.remove()}findMatches(){const e=this.$.input.value.split("").concat([" "]),t=[];let o="";for(let a in e){let i=e[a],n=e[a-1]||" ",l=[" ","\\n"].indexOf(n)>-1||10===n.charCodeAt(0);("@"===i&&l||o.length)&&" "!==i&&(o+=i),o.length&&" "===i&&(t.push({word:o,index:Math.max(a-o.length,0)}),o="")}return t}getMentions(){const e=this,t=this.findMatches(),o=[];return t.forEach((t=>{e.users.forEach((e=>{const a=t.word.replace("@","");e.name===a&&o.push(e)}))})),o}_initUsersMention(){const e=this;if(e._initMenu)return;if(e.richText)return;e._initMenu=!0;const t=document.createElement("div");t.id=e.id+"_mention_menu",t.classList.add("smart-text-area-mention-menu","smart-hidden"),e._mentionMenu=t,document.body.appendChild(t),e._mentionPlugin=new Smart.Mention(e.richText?e.$.editor.querySelector(".smart-editor-editable"):e.$.input,t,(t=>""===t?e.users:e.users.filter((e=>e.name.startsWith(t)))),((e,t)=>e?`${t}${e.name} `:""),((e,t,o)=>{const a=document.createElement("div");return a.setAttribute("role","option"),a.className="smart-text-area-mention-menu-item",o&&(a.classList.add("selected"),a.setAttribute("aria-selected","")),a.textContent=e.name,a.onpointerdown=e=>{e.preventDefault(),t()},a}))}cleanWordHTML(e){let t=document.createElement("div");t.innerHTML=e;["o:p","w:","v:","xml"].forEach((e=>{let o=t.getElementsByTagName(e);for(;o.length>0;)o[0].remove()})),t.querySelectorAll("b").forEach((e=>e.outerHTML=e.outerHTML.replace("<b","<strong").replace("</b>","</strong>"))),t.querySelectorAll("i").forEach((e=>e.outerHTML=e.outerHTML.replace("<i","<em").replace("</i>","</em>"))),t.querySelectorAll("*[style]").forEach((e=>{const t=["color","background-color","font-weight","font-style"],o=e.getAttribute("style");if(o){let a="";o.split(";").forEach((e=>{let[o,i]=e.split(":");o=o&&o.trim(),i=i&&i.trim(),t.includes(o)&&(a+=`${o}: ${i}; `)})),a.trim()?e.setAttribute("style",a.trim()):e.removeAttribute("style")}})),t.innerHTML=t.innerHTML.replace(/(\r?\n|\r)/g,"<br>"),t.innerHTML=t.innerHTML.replace(/(<p>(\s|&nbsp;)*<\/p>\s*){2,}/g,"<p></p>"),t.innerHTML=t.innerHTML.replace(/([^\S\r\n]|&nbsp;){2,}/g," "),t.innerHTML=t.innerHTML.replace(/>\s+</g,"><"),t.innerHTML=t.innerHTML.replaceAll("·",""),t.innerHTML=t.innerHTML.replaceAll('class="MsoNormal"',""),t.innerHTML=t.innerHTML.replace(/<!--.*?-->/gs,""),["div","span"].forEach((e=>{let o=t.getElementsByTagName(e);Array.from(o).forEach((e=>{let t=e.parentNode;for(;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}))})),t.querySelectorAll("p, div, span").forEach((e=>{e.textContent.trim()||e.querySelector("img")||e.querySelector("a")||e.remove()}));let o=t.innerHTML;return o.replace(/[\u2018\u2019]/g,"'").replace(/[\u201C\u201D]/g,'"').replace(/\u2013/g,"-").replace(/\u2014/g,"--").replace(/\u2026/g,"...").replace(/\u00A0/g," ").replace(/\uFEFF/g,"").replace(/[\u200B-\u200D]/g,"").replace(/[\u202A-\u202E]/g,""),o}_handlePaste(e,t){const o=this,a=navigator.clipboard,i=a.read?"read":"readText",n=()=>{a[i]&&a[i]().then((a=>{if(Array.isArray(a)&&a.length){const i=a[0];let n=i.types.indexOf("text/html")>-1?"text/html":"text/plain";i.getType(n).then((a=>{a.text().then((a=>{(a.indexOf("<div>")>=0||a.indexOf("<span>")>=0||a.indexOf("<p>")>=0)&&(n="text/html"),o._handleTextPaste(a,e,n,t)}))}))}else if("string"==typeof a){let i="text/plain";(a.indexOf("<div>")>=0||a.indexOf("<span>")>=0||a.indexOf("<p>")>=0)&&(i="text/html"),o._handleTextPaste(a,e,i,t)}}))};if(navigator.permissions&&navigator.permissions.query&&!o._isFireFox)try{navigator.permissions.query({name:"clipboard-read"}).then((e=>{("granted"===e.state||"prompt"===e.state&&a[i])&&n()}))}catch(e){o.error(o.localize("permissionsRequired",{elementType:o.nodeName.toLowerCase(),actionName:"paste"}))}else if(a[i])return void n();e.getRootNode().execCommand("paste")}_handleTextPaste(e,t,o,a){const i=this;e=e.replace(/<!--StartFragment-->|<!--EndFragment-->/gi,"");let n;if(!o){const t=document.createElement("div");t.innerHTML=e,e=t.innerText}const l=e.toLocaleLowerCase();if(n=document.createElement("span"),e=i.cleanWordHTML(e),n.innerHTML=e,l.indexOf("<video")>-1||l.indexOf("<iframe")>-1||l.indexOf("smart-editor-image-caption")>-1){const e=n.querySelectorAll("video, iframe"),t=n.querySelector(".smart-editor-image-caption"),o=e.length>0;let a=document.createDocumentFragment();for(let t=0,o=e.length;t<o;t+=1)a.appendChild(e[t]);if(t&&(t.removeAttribute("style"),a.appendChild(t)),o||t){const e=document.createElement("span");n.classList.add("smart-editor-image-container"),o&&n.classList.add("smart-editor-video-container"),n.setAttribute("contenteditable",!1),a.childElementCount&&(n.innerHTML="",n.appendChild(a)),e.appendChild(n),n=e}}const r=a._getSelectionRange(),[s,d]=[window,document];if(r instanceof s.Range){if(r.deleteContents(),n.childNodes.length)for(;n.lastChild;)r.insertNode(n.lastChild);else r.insertNode(n);r.collapse()}else d.execCommand("paste")}_initRichText(e,t,o){const a=this,i=a,n={};if(!e)return;o||(o={undo:"Undo",redo:"Redo",bold:"Bold",italic:"Italic",underline:"Underline",striketrhough:"Strikethrough",fontname:"Font Name",fontsize:"Font Size",alignment:"Alignment",unorderedlist:"Bulleted list",orderedlist:"Numbered list",checklist:"Checklist",paragraph:"Paragraph",format:"Format",image:"Image",h1:"Large Heading",h2:"Medium Heading",h3:"Small Heading",link:"Create link",code:"Code",openLink:"Ctrl + Click to go to link: ",clearformat:"Clear format",backgroundcolor:"Background Color",fontcolor:"Font Color",okButton:"Ok",cancelButton:"Cancel"});const l=`\n            <div class="smart-container">\n                <div class="smart-editor-toolbar"> \n                    <div style="height: auto;" class="smart-editor-toolbar-items-primary">\n                         <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.bold}" command="bold" item-name="bold"></div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.italic}" command="italic" item-name="italic"></div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.underline}" command="underline" item-name="underline"></div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.striketrhough}" command="strikethrough" item-name="strikethrough"></div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center smart-arrow-down" item-value="Roboto" item-type="drop-down" item-name="fontname" tooltip="${o.fontname}"></div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center smart-arrow-down" item-value="14" item-type="drop-down" item-name="fontsize" tooltip="${o.fontsize}"></div>\n                        <div style="--item-value: var(--smart-primary);" class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="color-input" tooltip="${o.fontcolor}" command="fontcolor" item-name="fontcolor"><span item-name="fontcolor" class="smart-editor-item-action-button"></span></div>\n                        <div style="--item-value: var(--smart-secondary);" class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="color-input" tooltip="${o.backgroundcolor}" command="backgroundcolor" item-name="backgroundcolor"><span item-name="backgroundcolor" class="smart-editor-item-action-button"></span></div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center smart-arrow-down" item-type="button" item-value="left" item-name="alignment" command="justify" tooltip="${o.alignment}"></div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.unorderedlist}" command="insertUnorderedList" item-name="unorderedlist"></div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.orderedlist}" command="insertOrderedList" item-name="orderedlist"></div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.checklist}" command="insertUnorderedList" item-name="checklist"></div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.link}" command="hyperlink" item-name="hyperlink"></div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.image}" command="image" item-name="image"></div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center smart-arrow-down" item-type="button" item-name="tableheader" tooltip="${o.format}"></div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.undo}" command="undo" item-name="undo"></div>\n                         <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.redo}" command="redo" item-name="redo"></div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.clearformat}" command="removeformat" item-name="clearformat"></div>\n                        </div>\n                </div>\n            <div class="smart-editor-content-container">\n                <div class="smart-editor-editable" contenteditable="true"></div>\n            </div>\n        </div>\n        `,r=e;r.className="smart-editor smart-rich-textarea",r.style.borderLeftWidth=r.style.borderTopWidth=r.style.borderRightWidth=r.style.borderBottomWidth="0px",r.innerHTML=l;const s=r.querySelector(".smart-editor-editable");s.style.resize=a.resize,r.addEventListener("drop",(t=>{if(t.dataTransfer.items){let o=0;const i=5,n=["image/apng","image/bmp","image/gif","image/jpeg","image/jpg","image/pjpeg","image/png","image/svg+xml","image/tiff","image/webp","image/x-icon","video/x-msvideo","text/csv","application/msword","application/vnd.openxmlformats-officedocument.wordprocessingml.document","application/vnd.ms-fontobject","image/gif","application/json","text/plain","application/xml","application/zip","application/gzip","application/pdf","application/vnd.ms-powerpoint","application/vnd.openxmlformats-officedocument.presentationml.presentation","application/x-7z-compressed","application/vnd.rar","application/rtf","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","application/x-zip-compressed","audio/mpeg","video/mp4","video/mpeg","video/x-msvideo","video/quicktime"];for(let l=0;l<t.dataTransfer.items.length;l++)if("file"===t.dataTransfer.items[l].kind){const r=t.dataTransfer.items[l].getAsFile();if(n.indexOf(r.type)>=0&&(o++,o<=i&&null!==r)){let o=new FileReader;return o.onload=function(t){if(s.getRootNode().execCommand("insertHTML",!1,`<img id="targetImage" src="${t.target.result}"/>`),a.uploadSettings.uploadUrl){const t=s.getRootNode().querySelector("#targetImage");t&&(t.id=""),m(t,r,(o=>{t&&o&&o.length&&(t.src=o[0].medium||o[0].value,t.classList.remove("smart-hidden"),e.imgArray||(e.imgArray=[]),e.imgArrayId||(e.imgArrayId=[]),e.imgArray.push(t.src),e.imgArrayId[t.src]=o[0])}))}},o.readAsDataURL(r),void t.preventDefault()}}}})),r.addEventListener("paste",(t=>{const o=t.clipboardData;if(o&&o.types.length){t.preventDefault();let o=(t.clipboardData||t.originalEvent.clipboardData).items,i=null;for(let e=0;e<o.length;e++)0===o[e].type.indexOf("image")&&(i=o[e].getAsFile());if(null!==i){let t=new FileReader;return t.onload=function(t){if(s.getRootNode().execCommand("insertHTML",!1,`<img id="targetImage" src="${t.target.result}"/>`),a.uploadSettings.uploadUrl){const t=s.getRootNode().querySelector("#targetImage");t&&(t.id=""),m(t,i,(o=>{t&&o&&o.length&&(t.src=o[0].medium||o[0].value,t.classList.remove("smart-hidden"),e.imgArray||(e.imgArray=[]),e.imgArrayId||(e.imgArrayId=[]),e.imgArray.push(t.src),e.imgArrayId[t.src]=o[0])}))}},void t.readAsDataURL(i)}}this._handlePaste(s,n),t.preventDefault()})),a.style.minHeight=a.minHeight+"px",s.style.minHeight=a.minHeight+"px",s.style.minWidth=a.minWidth+"px",e.style.minHeight=a.minHeight+"px",e.style.minWidth=a.minWidth+"px";const d=r.querySelectorAll(".smart-editor-toolbar-item");for(let e=0;e<d.length;e++){const t=d[e],o=t.getAttribute("item-name");-1===a.toolbarItems.indexOf(o)&&t.classList.add("smart-hidden")}if(n.textarea=t,n.tools=[],n.toolbar=r.querySelector(".smart-editor-toolbar"),a.toolbarOnFocus){n.toolbar.id=a.id+"_toolbar";const e=document.createElement("div");e.classList.add("smart-editor"),e.classList.add("smart-editor-toolbar-float"),e.setAttribute("focus",""),e.appendChild(n.toolbar),r.querySelector(".smart-container").setAttribute("toolbar-on-focus",""),a.appendChild(e)}n.contentContainer=r.querySelector(".smart-editor-content-container");const u=document.createElement("div");u.className="smart-editor-tooltip",u.setAttribute("tooltip-position","bottom"),document.body.appendChild(u),n.tooltip=document.querySelector(".smart-editor-tooltip");new ResizeObserver((()=>{if("none"!==a.resize){if(a.style.width=parseInt(s.offsetWidth)+2+"px",a.toolbarOnFocus)return void(a.style.height=parseInt(s.offsetHeight)+2+"px");a.style.height=parseInt(s.offsetHeight)+n.toolbar.offsetHeight+2+"px"}})).observe(s);const c=[],m=(e,t,o)=>{const a=this;if(!e)return;const i=new FormData,n=a.uploadSettings.url;let l=!1;const r=t,s=t.type,d=a.uploadSettings.data;d&&""!==d&&("string"==typeof d?i.append("postData",d):i.append("postData",JSON.stringify(d))),i.append("fileType",s),i.append(a.uploadSettings.name,t),l=!0;let u=new XMLHttpRequest;u.open("POST",n),a.uploadSettings.onSetHeaders&&"function"==typeof a.uploadSettings.onSetHeaders&&a.uploadSettings.onSetHeaders(u,r),a.uploadSettings.onUploadStarted&&a.uploadSettings.onUploadStarted({files:[t],status:u.status}),u.upload.onprogress=function(e){a.uploadSettings.onProgress&&a.uploadSettings.onProgress(e)},u.onabort=function(e){a.uploadSettings.onAbort&&a.uploadSettings.onAbort(e)},u.onerror=function(e){a.uploadSettings.onError&&a.uploadSettings.onError(e)},u.onload=function(){let e=!1;if(u.response&&("string"==typeof u.response?(e=u.response,e.indexOf("[{")>=0&&(e=JSON.parse(u.response))):e=JSON.parse(u.response)),u.status>=200&&u.status<=299){const i=(e,t)=>{if(e.response&&e.response.response&&"success"!==e.response.response)return null;let o=!1;u.fileURL&&(o=u.file_url);let a={};e&&e.file_url?o=e.file_url:e&&e[0]&&e[0].file_url&&(o=e[0].file_url);let i=!1;e&&e.file_url_small?i=e.file_url_small:e&&e[0]&&e[0].file_url_small&&(i=e[0].file_url_small);let n=!1;e&&e.file_url_medium?n=e.file_url_medium:e&&e[0]&&e[0].file_url_medium&&(n=e[0].file_url_medium);let l=!1;return e&&e.file_url_large?l=e.file_url_large:e&&e[0]&&e[0].file_url_large&&(l=e[0].file_url_large),o&&(a.value=o),i&&(a.small=i),n&&(a.medium=n),l&&(a.large=l),a.label=t,a},n=[t];for(let t=0;t<n.length;t++){const o=n[t].name?[]:n[t].split("/"),l="url"===s?o[o.length-1]:n[t].name;a.uploadSettings.url;const r=i((e.files||e[0]&&e[0].files||[e[0]])[t],l);r&&c.push(r)}o(c,e)}else o(c,e)},u.onreadystatechange=function(){},u.send(i)};d.forEach((t=>{const l=t.getAttribute("item-name");n.tools[l]={element:t,type:"button"},t.onmouseenter=e=>{setTimeout((()=>{const t=e.target.getAttribute("tooltip"),o=e.target.getBoundingClientRect(),i=(n.toolbar.getBoundingClientRect(),e=>e?e.offsetTop+i(e.offsetParent):0),l=e=>e?e.offsetLeft+l(e.offsetParent):0,r=(s=e.target,{left:l(s),top:i(s)});var s;n.tooltip.style.top=5+r.top+o.height+"px",n.tooltip.setAttribute("hover-tooltip",t),n.tooltip.classList.add("open"),n.tooltip.style.left=r.left+o.width/2-n.tooltip.offsetWidth/2+"px",a._tooltipTimer&&clearTimeout(a._tooltipTimer),a._tooltipTimer=setTimeout((()=>{n.tooltip.classList.remove("open")}),1e3)}),150)},t.onmouseleave=()=>{n.tooltip.classList.remove("open")},t.onpointerup=e=>(e.preventDefault(),e.stopPropagation(),!1),t.onpointerdown=t=>{const l=t.target.getAttribute("item-name"),s=(t.target.getAttribute("item-value"),t.target.getAttribute("command")),d=t.target.getAttribute("command-value"),u=r.querySelector(".smart-editor-editable"),c=e=>{if(!e||"tableheader"===e){const e=a.toolbarOnFocus?document.querySelector("#"+a.id+'_toolbar [item-name="tableheader"]'):r.querySelector('[item-name="tableheader"]');e._popup&&(e._popup.remove(),delete e._popup)}if(!e||"alignment"===e){const e=a.toolbarOnFocus?document.querySelector("#"+a.id+'_toolbar [item-name="alignment"]'):r.querySelector('[item-name="alignment"]');e._popup&&(e._popup.remove(),delete e._popup)}if(!e||"fontsize"===e){const e=a.toolbarOnFocus?document.querySelector("#"+a.id+'_toolbar [item-name="fontsize"]'):r.querySelector('[item-name="alignment"]');e._popup&&(e._popup.remove(),delete e._popup)}if(!e||"fontname"===e){const e=a.toolbarOnFocus?document.querySelector("#"+a.id+'_toolbar [item-name="fontname"]'):r.querySelector('[item-name="alignment"]');e._popup&&(e._popup.remove(),delete e._popup)}if(!e||"fontcolor"===e){const e=a.toolbarOnFocus?document.querySelector("#"+a.id+'_toolbar [item-name="fontcolor"]'):r.querySelector('[item-name="fontcolor"]');e._popup&&(e._popup.remove(),delete e._popup)}if(!e||"backgroundcolor"===e){const e=a.toolbarOnFocus?document.querySelector("#"+a.id+'_toolbar [item-name="backgroundcolor"]'):r.querySelector('[item-name="backgroundcolor"]');e._popup&&(e._popup.remove(),delete e._popup)}};if("tableheader"!==l)if("fontcolor"!==l&&"backgroundcolor"!==l)if("alignment"!==l)if("fontsize"!==l)if("fontname"!==l){switch(c(),t.target.hasAttribute("checked")?t.target.removeAttribute("checked"):t.target.setAttribute("checked",""),l){case"bold":case"italic":case"underline":case"strikethrough":case"unorderedlist":case"checklist":case"orderedlist":case"undo":case"redo":u.getRootNode().execCommand(s,!1,null);break;case"removeformat":case"clearformat":u.getRootNode().execCommand("removeformat",!1,null);break;case"image":{const t=document.createElement("input");t.type="file",t.accept="image/jpeg, image/png, image/gif",t.hidden=!0,document.body.appendChild(t);n._getSelectionRange();u.getRootNode().execCommand("insertHTML",!1,'<img style="max-width: 100%;" class="smart-hidden" id="targetImage"/>'),t.click(),t.onchange=()=>{const o=u.getRootNode().getElementById("targetImage"),i=t.files[0];o.id="",o.classList.add("smart-hidden");const n=new FileReader;n.addEventListener("load",(function(){o.src=n.result,o.classList.remove("smart-hidden")})),i&&n.readAsDataURL(i),a.uploadSettings.uploadUrl&&m(o,i,(t=>{t&&t.length&&(o.src=t[0].medium||t[0].value,o.classList.remove("smart-hidden"),e.imgArray||(e.imgArray=[]),e.imgArrayId||(e.imgArrayId=[]),e.imgArray.push(o.src),e.imgArrayId[o.src]=t[0])}))};break}case"hyperlink":{if(i._activeAnchorMenu)return t.preventDefault(),void t.stopPropagation();const e=n._getSelectionRange();let l,r=e.startContainer;r&&"a"!==r.nodeName.toLowerCase()&&(r=r.parentElement);let s=!1;if(r&&"a"===r.nodeName.toLowerCase()?(l=r.textContent,s=!0):l=e.toString(),s){if(void 0!==l){const e=h(a.id+"_anchor",l,r);i._activeAnchorMenu=e;const t=f(document),s=t.getRange();e.onselectitem=(e,a,i)=>{if(u.focus(),t.selectRange(s),e=(e=e.replace("https://","")).replace("http://",""),i)return r.remove(),void u.getRootNode().execCommand("insertHTML",!1,a);r.innerHTML=a,r.href="https://"+e.trim()+'"',r.title=o.openLink+"https://"+e.trim(),setTimeout((()=>{let e=n._getSelectionRange().startContainer;e&&"a"!==e.nodeName.toLowerCase()&&(e=e.parentElement),e&&"a"===e.nodeName.toLowerCase()&&(e.onmouseenter=t=>{t.ctrlKey&&e.classList.add("ctrl")},e.onmousemove=t=>{t.ctrlKey&&e.classList.add("ctrl")},e.onmouseleave=()=>{e.classList.remove("ctrl")})}),50)}}}else if(void 0!==l){const e=h(a.id+"_anchor",l);i._activeAnchorMenu=e;const t=f(document),r=t.getRange();e.onselectitem=(e,a)=>{u.focus(),t.selectRange(r),e=(e=e.replace("https://","")).replace("http://",""),u.getRootNode().execCommand("insertHTML",!1,'<a title="'+o.openLink+"https://"+e.trim()+'" href="https://'+e.trim()+'">'+a+"</a>"),setTimeout((()=>{let e=n._getSelectionRange().startContainer;e&&"a"!==e.nodeName.toLowerCase()&&(e=e.parentElement),e&&"a"===e.nodeName.toLowerCase()&&(e.onmouseenter=t=>{t.ctrlKey&&e.classList.add("ctrl")},e.onmousemove=t=>{t.ctrlKey&&e.classList.add("ctrl")},e.onmouseleave=()=>{e.classList.remove("ctrl")})}),50)}}break}case"h1":case"h2":case"h3":case"p":case"pre":case"justify":case"formats":u.getRootNode().execCommand(s,!1,d)}if("checklist"===l){const e=window.getSelection();if(e.focusNode){const t=e.focusNode.parentElement.closest("ul");t&&t.setAttribute("checklist","")}}t.preventDefault(),t.stopPropagation()}else{t.preventDefault(),t.stopPropagation(),c("fontcolor"),c("backgroundcolor"),c("tableheader"),c("alignment"),c("fontsize");const e=a.toolbarOnFocus?document.querySelector("#"+a.id+'_toolbar [item-name="fontname"]'):r.querySelector('[item-name="fontname"]');if(e._popup)e._popup.remove(),delete e._popup;else{e._popup=document.createElement("div");const t=e._popup;document.body.appendChild(t),t.style.position="absolute",t.style.height="auto",t.style.width="auto",t.style.paddingLeft=t.style.paddingLeft=t.style.paddingRight=t.style.paddingBottom=t.style.paddingTop="5px",t.style.background="var(--smart-background)",t.style.borderStyle="solid",t.style.borderWidth="1px",t.style.borderColor="var(--smart-border)",t.style.boxShadow="var(--smart-elevation-8)",t.style.zIndex=99999;const o=e.getBoundingClientRect();t.style.top=o.bottom+"px",t.style.left=o.left+"px",t.innerHTML='\n                     <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-family: \'Roboto\'" command="fontname" command-value="roboto" item-name="fontname" item-value="roboto">Roboto</div>\n                    <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-family: \'Segoe UI\'" command="fontname" command-value="segoeUi" item-name="fontname" item-value="segoeUi">Segoe UI</div>\n                    <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-family: \'Arial\'" command="fontname" command-value="arial" item-name="fontname" item-value="arial">Arial</div>\n                    <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-family: \'georgia\'" command="fontname" command-value="georgia" item-name="fontname" item-value="georgia">Georgia</div>\n                    <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-family: \'impact\'" command="fontname" command-value="impact" item-name="fontname" item-value="impact">Impact</div>\n                    <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-family: \'tahoma\'" command="fontname" command-value="tahoma" item-name="fontname" item-value="tahoma">Tahoma</div>\n                    <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-family: \'timesNewRoman\'" command="fontname" command-value="timesNewRoman" item-name="timesNewRoman" item-value="timesNewRoman">Times New Roman</div>\n                    <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-family: \'verdana\'" command="fontname" command-value="verdana" item-name="fontname" item-value="verdana">Verdana</div>\n                    ',t.querySelectorAll(".smart-button").forEach((t=>{t.onpointerup=t=>(t.preventDefault(),t.stopPropagation(),e._popup.remove(),delete e._popup,!1),t.onpointerdown=e=>{e.preventDefault(),e.stopPropagation();const t=e.target.getAttribute("command"),o=e.target.getAttribute("command-value");r.querySelector(".smart-editor-editable").getRootNode().execCommand(t,!1,o)}}))}}else{t.preventDefault(),t.stopPropagation(),c("fontcolor"),c("backgroundcolor"),c("tableheader"),c("alignment"),c("fontname");const e=a.toolbarOnFocus?document.querySelector("#"+a.id+'_toolbar [item-name="fontsize"]'):r.querySelector('[item-name="fontsize"]');if(e._popup)e._popup.remove(),delete e._popup;else{e._popup=document.createElement("div");const t=e._popup;document.body.appendChild(t),t.style.position="absolute",t.style.height="auto",t.style.width="50px",t.style.paddingLeft=t.style.paddingLeft=t.style.paddingRight=t.style.paddingBottom=t.style.paddingTop="5px",t.style.background="var(--smart-background)",t.style.borderStyle="solid",t.style.borderWidth="1px",t.style.borderColor="var(--smart-border)",t.style.boxShadow="var(--smart-elevation-8)",t.style.zIndex=99999;const o=e.getBoundingClientRect();t.style.top=o.bottom+"px",t.style.left=o.left+"px",t.innerHTML='\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-size: 8;" command="fontSize" command-value="8" item-name="8" item-value="8">8</div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-size: 10;" command="fontSize" command-value="10" item-name="10" item-value="10">10</div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-size: 12;" command="fontSize" command-value="12" item-name="12" item-value="12">12</div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-size: 14;" command="fontSize" command-value="14" item-name="14" item-value="14">14</div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-size: 16;" command="fontSize" command-value="16" item-name="16" item-value="16">16</div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-size: 18;" command="fontSize" command-value="18" item-name="18" item-value="18">18</div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-size: 24;" command="fontSize" command-value="24" item-name="24" item-value="24">24</div>\n                        <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" style="padding-left: 5px; padding-right: 5px; justify-content: flex-start; font-size: 36;" command="fontSize" command-value="36" item-name="36" item-value="36">36</div>\n                       ',t.querySelectorAll(".smart-button").forEach((t=>{t.onpointerup=t=>(t.preventDefault(),t.stopPropagation(),e._popup.remove(),delete e._popup,!1),t.onpointerdown=e=>{e.preventDefault(),e.stopPropagation();const t=e.target.getAttribute("command"),o=e.target.getAttribute("command-value");r.querySelector(".smart-editor-editable").getRootNode().execCommand(t,!1,3),function(){const e=n._getSelectionRange();if(e.commonAncestorContainer.closest){const t=e.commonAncestorContainer.querySelectorAll("font[size]");for(let e=0,a=t.length;e<a;e+=1){const a=t[e];a.removeAttribute("size"),a.style.fontSize=o+"px"}}else{const e=window.getSelection().focusNode;if(!e)return;const t=e.closest?e.closest(".smart-editor-editable font"):e.parentElement;"font"===t.nodeName.toLowerCase()&&(t.removeAttribute("size"),t.style.fontSize=o+"px")}}()}}))}}else{t.preventDefault(),t.stopPropagation(),c("fontcolor"),c("backgroundcolor"),c("tableheader"),c("fontsize"),c("fontname");const e=a.toolbarOnFocus?document.querySelector("#"+a.id+'_toolbar [item-name="alignment"]'):r.querySelector('[item-name="alignment"]');if(e._popup)e._popup.remove(),delete e._popup;else{e._popup=document.createElement("div");const t=e._popup;document.body.appendChild(t),t.style.position="absolute",t.style.height="auto",t.style.width="30px",t.style.background="var(--smart-background)",t.style.borderStyle="solid",t.style.borderWidth="1px",t.style.borderColor="var(--smart-border)",t.style.boxShadow="var(--smart-elevation-8)",t.style.zIndex=99999;const a=e.getBoundingClientRect();t.style.top=a.bottom+"px",t.style.left=a.left+"px",t.innerHTML=`\n                    <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.alignLeft}" command="justify" command-value="Left" item-name="alignment" item-value="left"></div>\n                    <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.alignCenter}" command="justify" command-value="Center" item-name="alignment" item-value="center"></div>\n                    <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.alignRight}" command="justify" command-value="Right" item-name="alignment" item-value="right"></div>\n                    <div class="smart-button smart-editor-toolbar-item smart-editor-toolbar-item-center" item-type="button" tooltip="${o.alignJustify}" command="justify" command-value="Full" item-name="alignment" item-value="justify"></div>\n                    `,t.querySelectorAll(".smart-button").forEach((t=>{t.onpointerup=t=>(t.preventDefault(),t.stopPropagation(),e._popup.remove(),delete e._popup,!1),t.onpointerdown=e=>{e.preventDefault(),e.stopPropagation();const t=e.target.getAttribute("command"),o=e.target.getAttribute("command-value");r.querySelector(".smart-editor-editable").getRootNode().execCommand(t+o,!1,null)}}))}}else{t.preventDefault(),t.stopPropagation(),c();const e=a.toolbarOnFocus?document.querySelector("#"+a.id+'_toolbar [item-name="'+l+'"]'):r.querySelector('[item-name="'+l+'"]');if(e._popup)e._popup.remove(),delete e._popup;else{e._popup=document.createElement("div");const t=e._popup;document.body.appendChild(t),t.style.position="absolute",t.style.height="auto",t.style.width="auto",t.style.background="var(--smart-background)",t.style.borderStyle="solid",t.style.borderWidth="1px",t.style.borderColor="var(--smart-border)",t.style.boxShadow="var(--smart-elevation-8)",t.style.zIndex=99999;const o=e.getBoundingClientRect();t.style.top=o.bottom+"px",t.style.left=o.left+"px",t.innerHTML="<style>\n                        \n.smart-editor-color-picker table {\n    margin: 0;\n    padding: 4px 4px 4px;\n    empty-cells: show;\n    border-collapse: separate;\n}\n\n.smart-editor-color-picker td {\n    border-collapse: separate;\n    border: 1px solid transparent;\n    cursor: pointer;\n    margin: 0;\n    position: relative;\n}\n\n.smart-editor-color-picker td:hover {\n    border: 1px solid #000;\n}\n\n.smart-editor-color-picker-selected-cell {\n    outline: 1px solid #000;\n}\n\n.smart-editor-color-picker td div {\n    width: 16px;\n    height: 16px;\n}\n                        </style>",t.innerHTML+='<div tool-name="'+l+'" class="smart-editor-color-picker"><div role="grid"><table class="smart-editor-color-picker-table" cellspacing="0" cellpadding="0"><tbody><tr><td aria-label="RGB (0, 0, 0)"><div title="RGB (0, 0, 0)" style="background-color: rgb(0, 0, 0);"></div></td><td aria-label="RGB (68, 68, 68)"><div title="RGB (68, 68, 68)" style="background-color: rgb(68, 68, 68);"></div></td><td aria-label="RGB (102, 102, 102)"><div title="RGB (102, 102, 102)" style="background-color: rgb(102, 102, 102);"></div></td><td aria-label="RGB (153, 153, 153)"><div title="RGB (153, 153, 153)" style="background-color: rgb(153, 153, 153);"></div></td><td aria-label="RGB (204, 204, 204)"><div title="RGB (204, 204, 204)" style="background-color: rgb(204, 204, 204);"></div></td><td aria-label="RGB (238, 238, 238)"><div title="RGB (238, 238, 238)" style="background-color: rgb(238, 238, 238);"></div></td><td aria-label="RGB (243, 243, 243)"><div title="RGB (243, 243, 243)" style="background-color: rgb(243, 243, 243);"></div></td><td aria-label="RGB (255, 255, 255)"><div title="RGB (255, 255, 255)" style="background-color: rgb(255, 255, 255);"></div></td></tr></tbody></table></div><div role="grid"><table class="smart-editor-color-picker-table" cellspacing="0" cellpadding="0"><tbody><tr><td aria-label="RGB (255, 0, 0)"><div title="RGB (255, 0, 0)" style="background-color: rgb(255, 0, 0);"></div></td><td aria-label="RGB (255, 153, 0)"><div title="RGB (255, 153, 0)" style="background-color: rgb(255, 153, 0);"></div></td><td aria-label="RGB (255, 255, 0)"><div title="RGB (255, 255, 0)" style="background-color: rgb(255, 255, 0);"></div></td><td aria-label="RGB (0, 255, 0)"><div title="RGB (0, 255, 0)" style="background-color: rgb(0, 255, 0);"></div></td><td aria-label="RGB (0, 255, 255)"><div title="RGB (0, 255, 255)" style="background-color: rgb(0, 255, 255);"></div></td><td aria-label="RGB (0, 0, 255)"><div title="RGB (0, 0, 255)" style="background-color: rgb(0, 0, 255);"></div></td><td aria-label="RGB (153, 0, 255)"><div title="RGB (153, 0, 255)" style="background-color: rgb(153, 0, 255);"></div></td><td aria-label="RGB (255, 0, 255)"><div title="RGB (255, 0, 255)" style="background-color: rgb(255, 0, 255);"></div></td></tr></tbody></table></div><div role="grid"><table class="smart-editor-color-picker-table" cellspacing="0" cellpadding="0"><tbody><tr><td aria-label="RGB (244, 204, 204)"><div title="RGB (244, 204, 204)" style="background-color: rgb(244, 204, 204);"></div></td><td aria-label="RGB (252, 229, 205)"><div title="RGB (252, 229, 205)" style="background-color: rgb(252, 229, 205);"></div></td><td aria-label="RGB (255, 242, 204)"><div title="RGB (255, 242, 204)" style="background-color: rgb(255, 242, 204);"></div></td><td aria-label="RGB (217, 234, 211)"><div title="RGB (217, 234, 211)" style="background-color: rgb(217, 234, 211);"></div></td><td aria-label="RGB (208, 224, 227)"><div title="RGB (208, 224, 227)" style="background-color: rgb(208, 224, 227);"></div></td><td aria-label="RGB (207, 226, 243)"><div title="RGB (207, 226, 243)" style="background-color: rgb(207, 226, 243);"></div></td><td aria-label="RGB (217, 210, 233)"><div title="RGB (217, 210, 233)" style="background-color: rgb(217, 210, 233);"></div></td><td aria-label="RGB (234, 209, 220)"><div title="RGB (234, 209, 220)" style="background-color: rgb(234, 209, 220);"></div></td></tr><tr><td id="T-Kw-Jn88" aria-label="RGB (234, 153, 153)"><div title="RGB (234, 153, 153)" style="background-color: rgb(234, 153, 153);"></div></td><td aria-label="RGB (249, 203, 156)"><div title="RGB (249, 203, 156)" style="background-color: rgb(249, 203, 156);"></div></td><td aria-label="RGB (255, 229, 153)"><div title="RGB (255, 229, 153)" style="background-color: rgb(255, 229, 153);"></div></td><td aria-label="RGB (182, 215, 168)"><div title="RGB (182, 215, 168)" style="background-color: rgb(182, 215, 168);"></div></td><td aria-label="RGB (162, 196, 201)"><div title="RGB (162, 196, 201)" style="background-color: rgb(162, 196, 201);"></div></td><td aria-label="RGB (159, 197, 232)"><div title="RGB (159, 197, 232)" style="background-color: rgb(159, 197, 232);"></div></td><td aria-label="RGB (180, 167, 214)"><div title="RGB (180, 167, 214)" style="background-color: rgb(180, 167, 214);"></div></td><td aria-label="RGB (213, 166, 189)"><div title="RGB (213, 166, 189)" style="background-color: rgb(213, 166, 189);"></div></td></tr><tr><td aria-label="RGB (224, 102, 102)"><div title="RGB (224, 102, 102)" style="background-color: rgb(224, 102, 102);"></div></td><td aria-label="RGB (246, 178, 107)"><div title="RGB (246, 178, 107)" style="background-color: rgb(246, 178, 107);"></div></td><td aria-label="RGB (255, 217, 102)"><div title="RGB (255, 217, 102)" style="background-color: rgb(255, 217, 102);"></div></td><td aria-label="RGB (147, 196, 125)"><div title="RGB (147, 196, 125)" style="background-color: rgb(147, 196, 125);"></div></td><td aria-label="RGB (118, 165, 175)"><div title="RGB (118, 165, 175)" style="background-color: rgb(118, 165, 175);"></div></td><td aria-label="RGB (111, 168, 220)"><div title="RGB (111, 168, 220)" style="background-color: rgb(111, 168, 220);"></div></td><td aria-label="RGB (142, 124, 195)"><div title="RGB (142, 124, 195)" style="background-color: rgb(142, 124, 195);"></div></td><td aria-label="RGB (194, 123, 160)"><div title="RGB (194, 123, 160)" style="background-color: rgb(194, 123, 160);"></div></td></tr><tr><td id="T-Kw-Jn104" aria-label="RGB (204, 0, 0)"><div title="RGB (204, 0, 0)" style="background-color: rgb(204, 0, 0);"></div></td><td aria-label="RGB (230, 145, 56)"><div title="RGB (230, 145, 56)" style="background-color: rgb(230, 145, 56);"></div></td><td aria-label="RGB (241, 194, 50)"><div title="RGB (241, 194, 50)" style="background-color: rgb(241, 194, 50);"></div></td><td aria-label="RGB (106, 168, 79)"><div title="RGB (106, 168, 79)" style="background-color: rgb(106, 168, 79);"></div></td><td aria-label="RGB (69, 129, 142)"><div title="RGB (69, 129, 142)" style="background-color: rgb(69, 129, 142);"></div></td><td aria-label="RGB (61, 133, 198)"><div title="RGB (61, 133, 198)" style="background-color: rgb(61, 133, 198);"></div></td><td aria-label="RGB (103, 78, 167)"><div title="RGB (103, 78, 167)" style="background-color: rgb(103, 78, 167);"></div></td><td aria-label="RGB (166, 77, 121)"><div title="RGB (166, 77, 121)" style="background-color: rgb(166, 77, 121);"></div></td></tr><tr><td aria-label="RGB (153, 0, 0)"><div title="RGB (153, 0, 0)" style="background-color: rgb(153, 0, 0);"></div></td><td aria-label="RGB (180, 95, 6)"><div title="RGB (180, 95, 6)" style="background-color: rgb(180, 95, 6);"></div></td><td aria-label="RGB (191, 144, 0)"><div title="RGB (191, 144, 0)" style="background-color: rgb(191, 144, 0);"></div></td><td aria-label="RGB (56, 118, 29)"><div title="RGB (56, 118, 29)" style="background-color: rgb(56, 118, 29);"></div></td><td aria-label="RGB (19, 79, 92)"><div title="RGB (19, 79, 92)" style="background-color: rgb(19, 79, 92);"></div></td><td aria-label="RGB (11, 83, 148)"><div title="RGB (11, 83, 148)" style="background-color: rgb(11, 83, 148);"></div></td><td aria-label="RGB (53, 28, 117)"><div title="RGB (53, 28, 117)" style="background-color: rgb(53, 28, 117);"></div></td><td aria-label="RGB (116, 27, 71)"><div title="RGB (116, 27, 71)" styl