text-area-with-line-number/lib/index.js

textarea with line numbers

module.exports=function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=t(1),o=i(r),l=i(t(2));function i(e){return e&&e.__esModule?e:{default:e}}n.default=function(e){var n=e.lineNumberBackground,t=void 0===n?"#fff":n,i=e.lineNumberTextColor,a=void 0===i?"#000":i,d=e.textAreaBackgroundColor,u=void 0===d?"#fff":d,c=e.textAreaTextColor,s=void 0===c?"#000":c,f=e.border,p=void 0===f?"1px solid #ddd":f,m=e.height,v=void 0===m?"30vh":m,b=e.textAreaFontSize,h=void 0===b?"1rem":b,w=e.lineNumberFontSize,g=void 0===w?"1rem":w,y=e.scrollbarWidth,x=void 0===y?"6px":y,k=e.scrollbarTrackColor,_=void 0===k?"transparent":k,C=e.srollbarThumbColor,E=void 0===C?"#888":C,j=e.onChange,L=void 0===j?function(){}:j,N=e.value,O=void 0===N?void 0:N,z=e.placeholder,T=void 0===z?"input your text here":z,F=e.textAreaFontFamily,M=void 0===F?"":F,P=e.lineNumberFontFamily,S=void 0===P?"":P,A="\n.tawln-active,\n.tawln-wrapper,\n.tawln-line {\n  margin: 0;\n  border: 0;\n  padding: 0;\n  outline: 0;\n  display: flex;\n  box-sizing: border-box;\n  vertical-align: middle;\n  list-style: none;\n}\n.tawln-active {\n  display: inline-block;\n  padding: 0.625em;\n  width: calc(100% - 3em);\n  height: 100%;\n  word-break: break-all;\n  resize: none;\n  overflow-wrap: normal;\n  overflow-x: auto;\n  white-space: pre;\n  font: "+g+" "+S+", monospace;\n}\n.tawln-wrapper {\n  width: 4em;\n  text-align: center;\n  padding: 0.6875em 0.3125em 2.1875em;\n  height: 100%;\n  word-break: break-all;\n  background-color: "+t+";\n  overflow: hidden;\n  display: inline-block;\n  counter-reset: line;\n  border-right:"+p+"\n}\n.tawln-line {\n  width: 100%;\n  display: block;\n  text-align: right;\n  line-height: 2rem;\n  font-size: "+g+";\n  font-family:"+S+";\n  color: "+a+";\n  text-align: center;\n}\n.tawln-line::before {\n  counter-increment: line;\n  content: counter(line);\n  font-size: "+g+";\n  user-select: none;\n  color:"+a+"\n}\n\n.source-wrapper{\ndisplay:flex;\n  height: "+v+";\n}\n.source::-webkit-scrollbar {\n  width:"+x+";\n}\n.source::-webkit-scrollbar-track {\n  background: "+_+";\n}\n.source::-webkit-scrollbar-thumb {\n  background: "+E+";\n}\n.source {\n  width: 100%;\n  background-color:"+u+";\n  color:"+s+";\n  background-blend-mode: overlay;\n  max-height: 100%;\n  font-size: "+h+";\n  font-family:"+M+"\n  resize: none;\n  overflow-y: scroll;\n  border: none;\n  outline: none;\n  padding-left: 35px;\n  padding-top: 10px;\n  padding-bottom: 0;\n  line-height:2rem;\n}\n\n\n      ";return(0,r.useEffect)((function(){l.default.append_line_numbers("text-area-with-line-number")}),[e]),o.default.createElement("div",null,o.default.createElement("style",null,A),o.default.createElement("div",{id:"wrapper",className:"source-wrapper"},o.default.createElement("textarea",{id:"text-area-with-line-number",required:!0,name:"solution",onChange:L,className:"source",value:O,placeholder:T})))}},function(e,n){e.exports=require("react")},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r={eventList:{},update_line_numbers:function(e,n){var t=e.value.split("\n").length-n.children.length;if(t>0){for(var r=document.createDocumentFragment();t>0;){var o=document.createElement("span");o.className="tawln-line",r.appendChild(o),t--}n.appendChild(r)}for(;t<0;)n.removeChild(n.lastChild),t++},append_line_numbers:function(e){var n=document.getElementById(e);if(null==n)return console.warn("[tawln.js] Couldn't find textarea of id '"+e+"'");if(-1!=n.className.indexOf("tawln-active"))return console.warn("[tawln.js] textarea of id '"+e+"' is already numbered");n.classList.add("tawln-active"),n.style={};var t=document.createElement("div");t.className="tawln-wrapper",n.parentNode.insertBefore(t,n),r.update_line_numbers(n,t),r.eventList[e]=[];for(var o=["propertychange","input","keydown","keyup"],l=function(e,n){return function(t){(10!=+e.scrollLeft||37!=t.keyCode&&37!=t.which&&"ArrowLeft"!=t.code&&"ArrowLeft"!=t.key)&&36!=t.keyCode&&36!=t.which&&"Home"!=t.code&&"Home"!=t.key&&13!=t.keyCode&&13!=t.which&&"Enter"!=t.code&&"Enter"!=t.key&&"NumpadEnter"!=t.code||(e.scrollLeft=0),r.update_line_numbers(e,n)}}(n,t),i=o.length-1;i>=0;i--)n.addEventListener(o[i],l),r.eventList[e].push({evt:o[i],hdlr:l});for(var a=["change","mousewheel","scroll"],d=function(e,n){return function(){n.scrollTop=e.scrollTop}}(n,t),u=a.length-1;u>=0;u--)n.addEventListener(a[u],d),r.eventList[e].push({evt:a[u],hdlr:d})}};n.default=r}]);