JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<!--
angular-paste © 2013 Varun Chatterji, used under a Creative Commons Attribution-ShareAlike license: http://creativecommons.org/licenses/by-sa/3.0/

See it at Git:
https://github.com/vchatterji/angular-paste

Borrows ideas from:
https://github.com/mleibman/SlickGrid
 -->

<div ng-cloak ng-app="myApp">
<div ng-controller="PasteController">
    <!--
    After paste, scope variable specified by ng-model will contain raw pasted text
    Scope variable specified by ng-array will contain an array of arrays of the
    tabular data
    -->
    <angular-paste ng-model="rawPaste" ng-array="parsedPaste"/>
    <table class="table table-striped table-bordered">
        <tr ng-repeat="row in parsedPaste">
            <td ng-repeat="col in row">{{col}}</td>
        </tr>
        <tr ng-show="parsedPaste.length==0">
            <td>Paste data from excel onto this page using Ctrl + V</td>
        </tr>
    </table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

CSS

[ng-cloak] {
            display: none;
        }

JavaScript

// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.directives'])
    .controller('PasteController', ['$scope', function ($scope) {
    $scope.rawPaste = '';
    $scope.parsedPaste = [];
}]);

angular.module('myApp.directives', [])
    .directive('angularPaste', ['$parse', '$document',
    function ($parse, $document) {
        return {
            restrict:'E',
            link:function (scope, element, attrs) {

                //We do not want to eat up chars if some text box is focussed
                //this variable will be set to true if focus is currently on
                //a textbox
                var inFocus = false;

                function parseTabular(text) {
                    //The array we will return
                    var toReturn = [];

                    try {
                        //Pasted data split into rows
                        var rows = text.split(/[\n\f\r]/);
                        rows.forEach(function (thisRow) {
                            var row = thisRow.trim();
                            if (row != '') {
                                var cols = row.split("\t");
                                toReturn.push(cols);
                            }
                        });

                    }
                    catch (err) {
                        console.log('error parsing as tabular data');
                        console.log(err);
                        return null;
                    }
                    return toReturn;
                }

                function textChanged() {
                    var text = $('#myPasteBox').val();
                    if (text != '') {
                        //We need to change the scope values
                        scope.$apply(function () {
                            if (attrs.ngModel != undefined && attrs.ngModel != '') {
                                $parse(attrs.ngModel).assign(scope, text);
                     ...