trc-client-core/src/admin/MarkdownEditor.jsx

The core of the TRC Client

import React from 'react';
import Page from 'trc-client-core/src/components/Page';

import Markdown from 'trc-client-core/src/components/Markdown';

import CodeEditor from 'trc-client-core/src/components/CodeEditor';
import {setData, getData} from 'trc-client-core/src/utils/LocalStorage';

var MarkdownEditor = React.createClass({
    displayName: 'MarkdownEditor',
    getInitialState() {
        return {
            markdown: getData('TRC::MarkdownEditor')  
        };
    },
    onChange(details) {
        setData('TRC::MarkdownEditor', details);
        this.setState({
            markdown: details
        });
    },
    render: function() {
        var {markdown} = this.state;
        return (
            <Page title="Markdown Editor" classes="is-app">
                <div className="panes panes-two">
                    <div className="pane">
                        <CodeEditor onChange={this.onChange} defaultValue={markdown} height="800px"/>
                    </div>
                    <div className="pane">
                        <div className="padding">
                            <Markdown html={markdown}/>
                        </div>
                    </div>
                </div>             
            </Page>
        );
    }
});

module.exports = MarkdownEditor;