Multiline problem

[vitor-peixoto]

I am trying to use multiline prop here, but whenever I add that a lot of weird stuff is happening and I'm following the example you guys have, like if I start to enter a text and I press enter the input | goes to the 0 index of the text and also it's writing text in another order if I write "love" it will write "evol".
can someone help me please?

class App extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      title: 'Title here',
    };
  }
 
  handleChange = (ev, value) => {
    console.log(ev);
    this.setState({ title: value });
  };

  handlePaste = (value) => console.log('paste', value);

  handleEvent = (ev, value) => {
    ev.persist();
    console.log(ev.type, ev, value);
  };
 
  render() {
    return (
      <div className="App">
        <ContentEditable
          tagName="h1"
          content={this.state.title}
          editable
          focus
          multiLine
          maxLength={140}
          multiLine={true}
          onBlur={this.handleEvent}
          onChange={this.handleChange}
          onKeyDown={this.handleEvent}
          onKeyUp={this.handleEvent}
          onPaste={this.handlePaste}
          caretPosition="end"
        />
      </div>
    );
  }
}

export default App;

``

[vitor-peixoto]

I made this :

render() {
    return (
      <div className="App">
        <ContentEditable
          tagName="h1"
          className="my-class"
          content={this.state.title}
          editable={true}
          multiLine={true}
          onChange={this.handleChange}
          onKeyUp={(e)=>e.keyCode === 13 ? this.setState({title: this.state.title + '\n'}) : null}
        />
      </div>
    );
  }

I have no idea if we can do better then this, if someone has a pretty solution let me know :)