Content Name Parameter

[alauper]

Hey Scniro, awesome library and great job maintaining it!

I have a basic question - I have the component working - my content field is javascript colorized accordingly. But when I submit my form, I don't see the content being passed as a parameter. So I'm a little confused. I'm expecting something similar to

parameters: { active: true, content: "var i = 1;\nvar j = 2;", name="John Doe" }

I've tried using uncontrolled and controlled approaches.

Example

import React, { Component } from 'react';
import {UnControlled as CodeMirror} from 'react-codemirror2'

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

....

<div style={{ border: '1px solid #cccccc', width: '90%' }}>
    <CodeMirror name="content" source="content" value='var i = 1;'
      options={{ extraKeys: { 'Ctrl-Space': 'autocomplete' }, lineNumbers: true,
      lineWrapping: true, mode: { name: 'javascript', globalVars: true }, theme: 'neat' }}
      onChange={(editor, data, value) => {}}
    />
</div>

[scniro]

Hey @alauper thanks for opening this up. I've read over your issue a few times and unfortunately I'm struggling to grasp what the core issue could be. If you could, can you please start over and explain the situation as best you can.

I looks like you're struggling with a form submission, in which case I assume value needs to be persisted somewhere before that submit. Anyways, I'll be happy to help, just need a little more info.

[scniro]

@alauper closing for now as I need more clarification on this. Please reopen should you have more detail to share.

[alauper]

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>
    )
  }
}