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

@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!