retrieving a DB record and using convertFromRaw is not allowing my text to change color

[TylerP33]

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:

class ColorPalette extends Component {

    clickColor = (e) => {
        if (e.currentTarget.classList.contains("color-container")) {
            this.props.onChange(RichUtils.toggleInlineStyle(this.props.editorState,  "color-rgb(26,188,156)"));
        }
     }

    render(){   
        return(
            <div onClick={this.clickColor} className="color-container">
                    <h1>click me</h1>
            </div>
        )
    }
}

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

[yury-sannikov]

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)

[TylerP33]

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.)

[yury-sannikov]

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}