Skip to content

Instantly share code, notes, and snippets.

@erikras
Created October 28, 2016 12:23
Show Gist options
  • Save erikras/5ca8dc618bae5dbc8faf7d2324585d01 to your computer and use it in GitHub Desktop.
Save erikras/5ca8dc618bae5dbc8faf7d2324585d01 to your computer and use it in GitHub Desktop.
Using react-rte with redux-form
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
@Dem0n3D
Copy link

Dem0n3D commented Nov 11, 2017

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

@Hiroki111
Copy link

@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')
      });
    }
  }

@riflemanIm
Copy link

@Dem0n3D
Thanks!

@probabble
Copy link

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

@DemiJiang33
Copy link

@Dem0n3D
Thank you so much!

@victorpavlenko
Copy link

@Dem0n3D
Thank you so much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment