JSFiddle - React, Tailwind, and code Playground

by manchagnu

HTML

<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://codemirror.net/lib/codemirror.js"></script>
<script type="text/javascript" src="http://codemirror.net/mode/javascript/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="http://codemirror.net/lib/codemirror.css"/>
<body>
    
    <div>
        <div data-bind="template: { name: 'textareaTmpl', data: selectedCondition }"> 
        </div>
        <!--Value of selected condition: <div data-bind="text: selectedCondition().content"></div>
        Condition one value: <div data-bind="text: conditions()[0]().content"></div>
        Condition two value: <div data-bind="text: conditions()[1]().content"></div>-->
    </div>
    
    <button data-bind="click: toTwo, visible: selectedCondition().content() == conditions()[0]().content()">To TEXTAREA 2</button>
    <button data-bind="click: toOne, visible: selectedCondition().content() === conditions()[1]().content()">To TEXTAREA 1</button>
    
    <br/>
    selected content:
    <div data-bind="text: selectedCondition().content"></div>
                  
    <script id="textareaTmpl" type="text/html">
        <textarea id="code" cols="60" rows="8" style="background: lightblue"
                  data-bind="value: content, codemirror: { 'lineNumbers': true, 'matchBrackets': true, 'mode': 'text/typescript' }"></textarea>
    </script>
    
</body>
</html>

JavaScript

ko.bindingHandlers.codemirror = {

    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var options = $.extend(valueAccessor(), {
            onChange: function(cm) {
                allBindingsAccessor().value(cm.getValue());
            }
        });
        var editor = CodeMirror.fromTextArea(element, options);
        element.editor = editor;
        editor.setValue(allBindingsAccessor().value());
        editor.refresh();
        var wrapperElement = $(editor.getWrapperElement()); 
            
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            wrapperElement.remove();
        });
    },
    update: function(element, valueAccessor, allBindingsAccessor) {
        var editor = element.editor;
        editor.refresh();
    } 
};

function ConditionObject(data) {
    var self = this;
    self.content = ko.observable(data);
};

function GlobalView() {
    var self = this;
    self.conditions = ko.observableArray([]);
    self.conditions.push(ko.observable(new ConditionObject("ONE")));
    self.conditions.push(ko.observable(new ConditionObject("TWO")));
    self.selectedCondition = ko.observable(new ConditionObject("ONE"));
    
    self.toOne = function() {
        self.selectedCondition(self.conditions()[0]());
    };
    self.toTwo = function() {
        self.selectedCondition(self.conditions()[1]());
    };
    
};

ko.applyBindings(new GlobalView());