added codemirror and playground

playground/main.js

@@ -19,9 +19,17 @@ function emptyFunc() {
     return null;
 }
 
-function generateTemplateFunction(html) {
+function generateTemplateSource(html) {
+    var code = null;
+    try {
+        code = reactTemplates.convertTemplateToReact(html.trim().replace(/\r/g, ""));
+    } catch (e) {
+    }
+    return code;
+}
+
+function generateTemplateFunction(code) {
     try {
-        var code = reactTemplates.convertTemplateToReact(html.trim().replace(/\r/g,""));
         var defineMap = {"react":React,"lodash":_};
         var define = function (requirementsNames,content) {
             var requirements = _.map(requirementsNames,function (reqName) {
@@ -60,8 +68,8 @@ var Playground = React.createClass({
     mixins: [React.addons.LinkedStateMixin],
 
     updateSample: function (state) {
-
+        this.templateSource = generateTemplateSource(state.templateHTML);
-        this.sampleFunc = generateTemplateFunction(state.templateHTML);
+        this.sampleFunc = generateTemplateFunction(this.templateSource);
         this.validHTML = this.sampleFunc !== emptyFunc;
         this.sampleRender = generateRenderFunc(this.sampleFunc);
         var classBase = {};

playground/playground.css

@@ -3,18 +3,22 @@
 }
 
 .large-text-area {
-    width:600px;
     height:300px;
+    margin: 10px;
 }
 
 .code-area {
-    width:620px;
+    width: 50%;
     height:620px;
     float:left;
 }
 
 .result-area {
-    width: 400px;
+    width: 50%;
-    height: 600px;
+    height: 620px;
     float:left;
 }
+
+.sample-view {
+    margin:10px;
+}

playground/playground.rt

@@ -1,7 +1,7 @@
 <!DOCTYPE rt CodeEditor="react-code-mirror">
 <div>
     <div class="code-area">
-    <form>
+        <h2>Template:</h2>
         <CodeEditor class="large-text-area" style="border: {this.validHTML? '1px solid black':'2px solid red'};"
 
             value="{this.state.templateHTML}"
@@ -11,6 +11,7 @@
             onChange="(evt) => this.setState({'templateHTML':evt.target.value})"
         />
         <br/>
+        <h2>Class:</h2>
         <CodeEditor class="large-text-area" style="border: {this.validProps? '1px solid black':'2px solid red'};"
                 value="{this.state.templateProps}"
                 mode="javascript"
@@ -19,12 +20,24 @@
                 lineNumbers="{true}"
                 onChange="(evt) => this.setState({'templateProps':evt.target.value})"
          />
-    </form>
     </div>
-    <div class="result-area">
+    <div key="result-area" class="result-area">
-        <this.sample>
+        <h2>Generated code:</h2>
+        <CodeEditor class="large-text-area" style="border:1px solid black;"
+                    value="{this.templateSource}"
+                    mode="javascript"
+                    theme="solarized"
+                    smartIndent="{true}"
+                    lineNumbers="{true}"
+                    readOnly="{true}"
+                />
+        <br/>
+        <h2>Preview:</h2>
+        <div class="sample-view">
+            <this.sample key="sample">
+            </this.sample>
+        </div>
 
-        </this.sample>
     </div>
 
 </div>

playground/playground.rt.js

@@ -9,7 +9,7 @@ function onChange2(evt) {
     this.setState({ 'templateProps': evt.target.value });
 }
 module.exports = function () {
-    return React.DOM.div({}, React.DOM.div({ 'className': 'code-area' }, React.DOM.form({}, CodeEditor({
+    return React.DOM.div({}, React.DOM.div({ 'className': 'code-area' }, React.DOM.h2({}, 'Template:'), CodeEditor({
         'className': 'large-text-area',
         'style': { border: this.validHTML ? '1px solid black' : '2px solid red' },
         'value': this.state.templateHTML,
@@ -17,7 +17,7 @@ module.exports = function () {
         'smartIndent': true,
         'lineNumbers': true,
         'onChange': onChange1.bind(this)
-    }), React.DOM.br({}), CodeEditor({
+    }), React.DOM.br({}), React.DOM.h2({}, 'Class:'), CodeEditor({
         'className': 'large-text-area',
         'style': { border: this.validProps ? '1px solid black' : '2px solid red' },
         'value': this.state.templateProps,
@@ -26,5 +26,17 @@ module.exports = function () {
         'smartIndent': true,
         'lineNumbers': true,
         'onChange': onChange2.bind(this)
-    }))), React.DOM.div({ 'className': 'result-area' }, this.sample({})));
+    })), React.DOM.div({
+        'key': 'result-area',
+        'className': 'result-area'
+    }, React.DOM.h2({}, 'Generated code:'), CodeEditor({
+        'className': 'large-text-area',
+        'style': { border: '1px solid black' },
+        'value': this.templateSource,
+        'mode': 'javascript',
+        'theme': 'solarized',
+        'smartIndent': true,
+        'lineNumbers': true,
+        'readOnly': true
+    }), React.DOM.br({}), React.DOM.h2({}, 'Preview:'), React.DOM.div({ 'className': 'sample-view' }, this.sample({ 'key': 'sample' }))));
 };