react-templates/playground/playground.rt

<!--<rt-require dependency="./aceEditor" as="CodeEditor"/>-->
<!--suppress CheckEmptyScriptTag -->
<rt-require dependency="./CodeMirrorEditor" as="CodeEditor"/>
<div class="playground">
    <div id="{this.props.id}-myTab" class="code-area {(this.props.direction === 'horizontal' && 'horizontal') ||'vertical'}">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">

            <li rt-repeat="tab in this.getTabs()" role="presentation"
                rt-class="{active:this.state.currentTab === tab[0]}"
                onClick="(evt)=> evt.preventDefault();this.setState({'currentTab':tab[0]});">
                <a aria-controls="{tab[1]}"
                   >{tab[1]}</a>
            </li>
        </ul>
        <!-- Tab panes -->
        <div>
            <div rt-if="this.state.currentTab === 'templateHTML'" class="tab-pane active" >
                <CodeEditor ref="editorRT" class="large-text-area" style="border: {this.validHTML? '':'2px solid red'};"
                            value="{this.state.templateHTML}"
                            mode="html"
                            onChange="(evt) => this.setState({'templateHTML':evt.target.value})" />
            </div>
            <div rt-if="this.state.currentTab === 'templateProps'" class="tab-pane active">
                <CodeEditor ref="editorCode" class="large-text-area" style="border: {this.validProps? '':'2px solid red'};"
                            value="{this.state.templateProps}"
                            mode="javascript"
                            onChange="(evt) => this.setState({'templateProps':evt.target.value})" />
            </div>
            <div rt-if="this.state.currentTab === 'templateSource'" class="tab-pane active">
                <CodeEditor class="large-text-area"
                            value="{this.templateSource}"
                            mode="javascript"
                            readOnly="{true}" />
            </div>
        </div>
    </div>

    <div key="result-area" class="result-area  {(this.props.direction === 'horizontal' && 'horizontal') ||'vertical'}">
        <span class="preview-title">{'\u00A0'}</span>
        <form class="sample-view" onSubmit="(e) => e.preventDefault();">
            <this.sample key="sample">
            </this.sample>
        </form>
    </div>
    <br style="clear:both">
</div>