JSFiddle - React, Tailwind, and code Playground

by AndrewZhang

HTML

<div class="expanding-wrap">
    <div class="expanding-area">
        <pre class="mirror-wrap"><span class="mirror"></span><br/></pre>
        <textarea class="source" cols="30" rows="10"></textarea>
    </div>
</div>

CSS

.expanding-wrap {
    background: #fff;
    width: 350px;
    padding: 4px;
    border: 1px solid #585858;
}

.expanding-area {
    position: relative;
    min-height: 50px;
}

.expanding-area .source,
.expanding-area .mirror-wrap {                
    white-space: pre-wrap;
    word-wrap: break-word;
    
    background: transparent;
    
    line-height: 1.5;
    font:14px/1.231 arial,helvetica,clean,sans-serif;
}

.expanding-area .mirror-wrap {
    display: block;
    visibility: hidden;
}

.expanding-area .source {    
    border: 0 none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    resize: none;
}

JavaScript

(function($, $$) {
    var mirrorEl = $$('.expanding-area .mirror'),
        textEl = $$('.expanding-area .source'),
        timehandle = null,
        
        handler = function() {
            mirrorEl.set('text', textEl.get('value'));
        };
    
    handler();
        
    textEl.addEvent('keyup', function(event) {
        
        clearTimeout(timehandle);
        
        timehandle = handler.delay(200);
    });

})($, $$);