Content Name Parameter

[alauper]

Hi Scniro, I'm unable to reopen a ticket that you closed. So here's what I posted to https://github.com/scniro/react-codemirror2/issues/64.

---

Hey scniro, thanks for your response.

I set this aside because I couldn't get it to work. But now I'm trying it a second time and I'm still confused. I think I might be missing a basic principle or example.

I'm using admin-on-rest (now react-admin), and I have stripped the form down to just a text input field (as a sanity check it's working) and a code mirror field. When I click submit, the text field parameter (helloWorld) is submitted but the code mirror parameter (content) is not. I want the user to type in code into the code mirror field and then include that value in the form submit.

import React, { Component } from 'react';
import { Create, SimpleForm, TextInput } from 'admin-on-rest';

import { Controlled as CodeMirror } from 'react-codemirror2'

require('codemirror/lib/codemirror.css');
require('codemirror/theme/material.css');
require('codemirror/theme/neat.css');
require('codemirror/mode/xml/xml.js');
require('codemirror/mode/javascript/javascript.js');

export class Example extends Component {
  state = {
    content: 'var a = 3;'
  };

  onChange = (newValue) => {
    console.log('change: ', newValue);
  }

  render() {
    return (
      <Create {...this.props}>
        <SimpleForm redirect="edit" {...this.props}>
          <TextInput source="helloWorld" /><br />
          <div style={{ border: '2px solid red', width: 500 }}>
            <CodeMirror
              ref="content"
              name="content"
              value={this.state.content}
              options={{
                lineNumbers: true, lineWrapping: true,
                extraKeys: { 'Ctrl-Space': 'autocomplete' },
                mode: { name: 'javascript', globalVars: true }
              }}
              onBeforeChange={(editor, data, value) => {
                console.log('before change');
                this.setState({ content: value });
              }}
              onChange={(editor, data, value) => {
                console.log('on change');
              }}
            />
          </div>
        </SimpleForm>
      </Create>
    )
  }
}

[scniro]

@alauper hello again! I'm still not 100% sure on what the exact issue is. It sounds like you are wanting to pass the CodeMirror user input value through the TextInput component. Can you make a hidden one and bind the state value to it? I know it might not be ideal, but I am unsure how that lib will work in relation to the editor. How about a hidden one as follows?...

<TextInput source={this.state.content} style={{visibility: 'hidden' }} />

I would imagine this second hidden field will "relay" the value for you. Let me know?

[alauper]

Thanks scniro! Still working on this. Closing until I respond.