Created
October 28, 2016 12:23
-
-
Save erikras/5ca8dc618bae5dbc8faf7d2324585d01 to your computer and use it in GitHub Desktop.
Using react-rte with redux-form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
componentWillReceiveProps(nextProps) {
this.state.value.setContentFromString(nextProps.value, "html");
}
@Dem0n3D
Thank you so much!
@Dem0n3D
Thank you so much!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
And you shouldn't specify input prop of Field, redux does it by itself. Use it like a simple input: