Open TylerP33 opened 5 years ago
you have to take a look customStyleMap
. this color-rgb(26,188,156)
should be a name of the style, not a style itself (which is not correct CSS style anyway)
Yeah, excuse that typo! So, take this for example
const styleMap = {
'STRIKETHROUGH': {
textDecoration: 'line-through',
},
'RED':{
color: 'red'
}
};
I have decoupled my InlineStyles from the TextEditor parent in my app. Everything works fine, including that STRIKETHROUGH property.
It works through some onClick
functionality and I am actually passing the child variable to the parent like this:
customStyleMap={<InlineStyles styleMap={this.styleMap} />}
Again, it works fine. So, why doesn't that red work? I've even attempted the color code but it seems I am missing something glaring?
this.props.onChange(RichUtils.toggleInlineStyle(this.props.editorState, 'RED'))
Is how I am attempting to change the color. (the EditorState is being retrieved from a mapStateToProps, which is retrieving the EditorState record from a Rails API. It is then passed to the InlineStyles child component.)
You might need to take a look at the https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/color/color.html#L162 example. customStyleMap
should probably be just customStyleMap={styleMap}
Hey guys,
I am trying to add some basic selection-based inline styling. I am accessing EditorState and my onChange in a child component, and attempting to handle the style there like so:
This works fine because DB record will look like this:
"{"blocks"=>[{"key"=>"5p965", "text"=>"blank check here", "type"=>"unstyled", "depth"=>0, "inlineStyleRanges"=>[{"offset"=>0, "length"=>16, "style"=>"color-rgb(26,188,156)"}], "entityRanges"=>[], "data"=>{}}], "entityMap"=>{}}",
Except, there is no styling going on during selection, nor is there any styling going on at re-render.
May be an issue or may be due to the fact that I am a new Draft.js scrub :D