zooniverse / markdownz

Markdown viewer and editor for the zooniverse
Apache License 2.0
2 stars 4 forks source link

MarkdownEditor must be used with a change listener #71

Open eatyourgreens opened 6 years ago

eatyourgreens commented 6 years ago

The default change listener for the editor is NOOP, implying that it's optional. If you don't supply a change listener then the displayed text in the editor doesn't change when you type. In practice, you must supply a change listener, which updates the editor's value prop on change.

eatyourgreens commented 6 years ago

Here, the text 'Hello World' cannot be changed in the editor.

<MarkdownEditor value={"Hello World"} />

Setting the value from component state and adding a change listener allows text to be edited:

class HelloWorld extends React.component {
  constructor() {
    this.state = {
      value: 'Hello World'
    };
  }
  onChange(e) {
    const { value } = e.target;
    this.setState({ value });
  }
  render() {
     <MarkdownEditor
      onChange={this.onChange.bind(this)}
      value={this.state.value}
    />
  }
}