 ###
 The React components
 ###
+
+InputEditor = rclass
+    propTypes :
+        value    : rtypes.string
+        style    : rtypes.object
+        onChange : rtypes.func.isRequired
+
+    handle_change: (e) ->
+        @props.onChange(e.target.value)
+
+    render : ->
+        <FormControl
+            componentClass = 'textarea'
+            value          = {@props.value}
+            style          = {@props.style}
+            onChange       = {@handle_change}
+        />
 
 JupyterEditor = rclass ({name}) ->
     propTypes :

    set_error: (err) =>
        @setState
            error : err

    _syncdb_change: =>
        # TODO: this is not efficient!

            <div style={color:'#303F9F', minWidth: '14ex', fontFamily: 'monospace', textAlign:'right', padding:'.4em'}>
                In [{cell.get('number') ? '*'}]:
            </div>
            <InputEditor
                value = {cell.get('input')}
                style = {width:'100%', backgroundColor: '#f7f7f7', fontFamily: 'monospace'}
                onChange = {(value) => @props.actions.set_cell_input(cell.get('id'), value)}
            />
        </div>

    render_output_number: (n) ->
