textarea

textarea


One textarea plugin to rule them all.

Ace editor and CodeMirror are over the top. I just want tabs and block indentation.

And auto-expansion to fix the contents (height-wise).

Your </code> should specify <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">min-height</code> and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">max-height</code>, but not <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">height</code>.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Alternatives</h2></p><p class="my-3">* <a href="https://github.com/andreypopp/react-textarea-autosize.git" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">react-textarea-autosize</a>, <a href="http://andreypopp.github.io/react-textarea-autosize/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">demo</a>: apparently only handles newlines, so if your lines wrap, the height will be wrong.<br />* <a href="https://github.com/zippyui/react-textarea" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">react-textarea</a>: derived from react-textarea-autosize<br />* <a href="http://www.jacklmoore.com/autosize/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">autosize</a>: Looks nice, actually, but used to be jQuery?<br />* <a href="https://github.com/buildo/react-autosize-textarea" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">react-autosize-textarea</a>: This one seems to work.<br />* <a href="https://github.com/stevepapa/angular2-autosize" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">angular2-autosize</a>: super simple (3 lines of logic!), but works nicely at first glance.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">Copyright 2013-2016 Christopher Brown. <a href="http://chbrown.github.io/licenses/MIT/#2013-2016" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MIT Licensed</a>.<br /></p></div></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div><template id="P:3"></template></div></div></div><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><script>$RC("B:1","S:1")</script></body></html>