Using react-rte with redux-form

RichTextMarkdown.js

import React, { Component, PropTypes } from 'react'

class RichTextMarkdown extends Component {
  static propTypes = {
    input: PropTypes.shape({
      onChange: PropTypes.func.isRequired,
      value: PropTypes.string
    }).isRequired
  }

  constructor(props) {
    super(props)
    this.state = { value: undefined }
  }

  componentDidMount() {
    this.RichTextEditor = window.RichTextEditor
    this.setState({
      value: this.props.input.value ?
        this.RichTextEditor.createValueFromString(this.props.input.value, 'markdown') :
        this.RichTextEditor.createEmptyValue()
    })
  }

  handleChange = value => {
    this.setState({ value })
    let markdown = value.toString('markdown')
    if(markdown.length === 2 && markdown.charCodeAt(0) === 8203 && markdown.charCodeAt(1) === 10) {
      markdown = ''
    }
    this.props.input.onChange(markdown)
  }

  render() {
    const { RichTextEditor, state: { value }, handleChange } = this
    return RichTextEditor ? <RichTextEditor value={value} onChange={handleChange}/> : <div/>
  }
}

export default RichTextMarkdown

None of the above work for me. The editor gets rendered but it is not being picked up in redux form.

I can't believe there is not a single example of the actual usage of this component.

Here is what I have:

RichTextEditor component:

import React, { Component, PropTypes } from 'react';
import RichTextEditor from 'react-rte';

class RichTextMarkdown extends Component {

    static propTypes = {
        input: PropTypes.shape({
            onChange: PropTypes.func.isRequired,
            value: PropTypes.string
        }).isRequired
    };
    constructor(props) {
        super(props);
        this.state = {
            value: this.props.input.value === '' ? RichTextEditor.createEmptyValue() : RichTextEditor.createValueFromString(this.props.input.value, 'html'),
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.input.value !== this.state.value.toString('html')) {
            this.setState({
                value: nextProps.input.value ?
                    RichTextEditor.createValueFromString(nextProps.input.value, 'html') :
                    RichTextEditor.createEmptyValue()
            });
        }
    }

    onChange = (value) => {
        this.setState({ value });
        console.log(value.toString('html'));

        this.props.input.onChange(value);
    };

    render() {
        return (
            <RichTextEditor value={this.state.value} onChange={this.onChange} />
        );
    }
}

export default RichTextMarkdown;

Actual usage of the component:

import RTE from '../../../elements/RichTextMarkdown ';

// ... form omitted
 <Field
        component={RTE}
        type="text"
        name="comment_closing_page"
        value="test"
        input={{ value: 'TEST', onChange: value => value.toString('html') }} />

When I submit the form I get all of my other fields but I can't get hold of the values for the text editor. Any one know why this is?

I can't believe there is not a single example of the actual usage of this component.

Yep, I'm too.
So, I fixed it.

import React, {Component} from 'react';
import RichTextEditor from 'react-rte';

class RichTextMarkdown extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value: this.props.input.value === '' ?
                RichTextEditor.createEmptyValue() :
                RichTextEditor.createValueFromString(this.props.input.value, 'html')
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.input.value !== this.state.value.toString('html')) {
            this.setState({
                value: nextProps.input.value ?
                    RichTextEditor.createValueFromString(nextProps.input.value, 'html') :
                    RichTextEditor.createEmptyValue()
            });
        }
    }

    onChange(value) {
        const isTextChanged = this.state.value.toString('html') != value.toString('html');
        this.setState({value}, e => isTextChanged && this.props.input.onChange(value.toString('html')));
    };

    render() {
        return (
            <RichTextEditor value={this.state.value} onChange={this.onChange.bind(this)} />
        );
    }
}

export default RichTextMarkdown;

The problem is concurrent updates of component internal state and redux state. So, we need to put onChange dispatch in setState callback.

And you shouldn't specify input prop of Field, redux does it by itself. Use it like a simple input:

<Field name="description" component={RichTextMarkdown} />

@smeijer
A bit old posting, but could you explain why you put const wasSubmitting?

In my case, putting the following part into OP's code solved the initialization issue with asynchronous API calls.

componentWillReceiveProps(nextProps) {
    const isPristine = nextProps.meta.pristine; 

    if (nextProps.input.value && isPristine) {
      this.setState({
        value: this.RichTextEditor.createValueFromString(nextProps.input.value, 'markdown')
      });
    }
  }

@Dem0n3D
Thanks!

based on this thread, I changed the componentWillRecieveProps in order to support React 16

sstur/react-rte#242 (comment)

componentWillReceiveProps(nextProps) {    
    this.state.value.setContentFromString(nextProps.value, "html");
}

@Dem0n3D
Thank you so much!

@Dem0n3D
Thank you so much!