code-input.min.js

var codeInput={usedTemplates:{},defaultTemplate:void 0,CodeInput:class extends HTMLElement{constructor(){super()}update(e){this.value!=e&&(this.value=e),this.querySelector("textarea").value!=e&&(this.querySelector("textarea").value=e);let t=this.querySelector("pre code");"\n"==e[e.length-1]&&(e+=" "),t.innerHTML=this.escape_html(e),this.template.includeCodeInputInHighlightFunc?this.template.highlight(t,this):this.template.highlight(t)}sync_scroll(){let e=this.querySelector("textarea"),t=this.template.preElementStyled?this.querySelector("pre"):this.querySelector("pre code");t.scrollTop=e.scrollTop,t.scrollLeft=e.scrollLeft}check_tab(e){if(this.template.isCode){let t=this.querySelector("textarea"),l=t.value;if("Tab"==e.key){if(e.preventDefault(),t.selectionStart==t.selectionEnd){let e=l.slice(0,t.selectionStart),i=l.slice(t.selectionEnd,t.value.length),a=t.selectionEnd+1;t.value=e+"\t"+i,t.selectionStart=a,t.selectionEnd=a}else{let l=t.value.split("\n"),i=0,a=t.selectionStart,n=t.selectionEnd,s=0,r=0;for(let a=0;a<l.length;a++)i+=l[a].length,t.selectionStart<i&&t.selectionEnd>i-l[a].length&&(e.shiftKey?"\t"==l[a][0]&&(l[a]=l[a].slice(1),0==s&&r--,s--):(l[a]="\t"+l[a],0==s&&r++,s++));t.value=l.join("\n"),t.selectionStart=a+r,t.selectionEnd=n+s}this.update(t.value)}}}escape_html(e){return e.replace(new RegExp("&","g"),"&amp;").replace(new RegExp("<","g"),"&lt;")}connectedCallback(){this.template=codeInput.usedTemplates[this.getAttribute("template")||codeInput.defaultTemplate],this.template.preElementStyled&&this.classList.add("code-input_pre-element-styled");let e=this.getAttribute("lang"),t=this.getAttribute("placeholder")||this.getAttribute("lang")||"",l=this.value||this.innerHTML||"";this.innerHTML="";let i=document.createElement("textarea");i.placeholder=t,i.value=l,i.setAttribute("spellcheck","false"),this.getAttribute("name")&&(i.setAttribute("name",this.getAttribute("name")),this.removeAttribute("name")),i.setAttribute("oninput","this.parentElement.update(this.value); this.parentElement.sync_scroll();"),i.setAttribute("onscroll","this.parentElement.sync_scroll();"),i.setAttribute("onkeydown","this.parentElement.check_tab(event);"),this.append(i);let a=document.createElement("code");this.template.isCode&&null!=e&&a.classList.add("language-"+e),a.innerText=l;let n=document.createElement("pre");n.setAttribute("aria-hidden","true"),n.append(a),this.append(n),this.update(l,this)}static get observedAttributes(){return["value","placeholder","lang","template"]}attributeChangedCallback(e,t,l){if(this.isConnected)switch(e){case"value":this.update(l);break;case"placeholder":this.querySelector("textarea").placeholder=l;break;case"template":this.template=codeInput.usedTemplates[l||codeInput.defaultTemplate],this.template.preElementStyled?this.classList.add("code-input_pre-element-styled"):this.classList.remove("code-input_pre-element-styled"),this.update(this.value);case"lang":let e=this.querySelector("pre code"),i=this.querySelector("textarea");e.className=null!=l?"language-"+l:"",i.placeholder==t&&(i.placeholder=l),this.update(this.value)}}get value(){return this.getAttribute("value")}set value(e){return this.setAttribute("value",e)}get placeholder(){return this.getAttribute("placeholder")}set placeholder(e){return this.setAttribute("placeholder",e)}},registerTemplate:function(e,t){codeInput.usedTemplates[e]=t,codeInput.defaultTemplate=e},templates:{custom:(e=function(){},t=!0,l=!0,i=!1)=>({highlight:e,includeCodeInputInHighlightFunc:i,preElementStyled:t,isCode:l}),prism:e=>({includeCodeInputInHighlightFunc:!1,highlight:e.highlightElement,preElementStyled:!0,isCode:!0}),hljs:e=>({includeCodeInputInHighlightFunc:!1,highlight:e.highlightElement,preElementStyled:!1,isCode:!0}),characterLimit:()=>({highlight:function(e,t){let l=Number(t.getAttribute("data-character-limit")),i=t.escape_html(t.value.slice(0,l)),a=t.escape_html(t.value.slice(l));e.innerHTML=`${i}<mark class="overflow">${a}</mark>`,a.length>0&&(e.innerHTML+=` <mark class="overflow-msg">${t.getAttribute("data-overflow-msg")||"(Character limit reached)"}</mark>`)},includeCodeInputInHighlightFunc:!0,preElementStyled:!0,isCode:!1}),rainbowText:(e=["red","orangered","orange","goldenrod","gold","green","darkgreen","navy","blue","magenta"],t="")=>({highlight:function(e,t){let l=[],i=t.value.split(t.template.delimiter);for(let e=0;e<i.length;e++)l.push(`<span style="color: ${t.template.rainbow_colors[e%t.template.rainbow_colors.length]}">${t.escape_html(i[e])}</span>`);e.innerHTML=l.join(t.template.delimiter)},includeCodeInputInHighlightFunc:!0,preElementStyled:!0,isCode:!1,rainbow_colors:e,delimiter:t})}};customElements.define("code-input",codeInput.CodeInput);