JSFiddle - React, Tailwind, and code Playground

by aaronfrost

HTML

<div ng-app>
    <div ng-controller="BlahCtrl">
        <div class="container">
            <div id="mirror" ng-bind-html-unsafe="viewableOutput">{{viewableOutput}}</div>
            <textarea name="box" id="box" cols="40" rows="14" ng-model="output"></textarea>
            <div class="output" ng-bind-html-unsafe="viewableOutput"></div>
        </div>
    </div>
</div>

CSS

.container{
    position: relative;
}

#mirror{
    width:304px;
    height:190px;
    border: 1px solid yellow;
    z-index:-1';
    padding: 4px 3px 4px 4px;
}
#box{
    position: absolute;
    top: 0;
    background: transparent;    
}
#box,#mirror{
    font-size:12px;
    font-family: Arial;
    
}

JavaScript

function BlahCtrl($scope){
    
    $scope.$watch('output', function(_new, _old){
        if(_new != undefined){
            $scope.viewableOutput = htmlify(_new);            
        }

    });
    
    function htmlify(text){
        text = text.replace(/\n/g, '<BR>');
        
        return text;
    }
}