Draft.js 's RichUtils.toggleInlineStyle doesn't work properly. please help! My code is on JSfiddle.

Is there any misunderstood?

var TextArea = React.createClass({
  ...
  toggleBlockStyle: function(blockType) {
    this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType)); // don't work!
  },

  toggleInlineStyle: function(inlineStyle) {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle)); // don't work!
  },

  handleClear: function() {
    this.onChange(EditorState.push(this.state.editorState, 
        ContentState.createFromText(''), 'remove-range')); // don't work!
  },
  ...
  render: function() {
    return (
      <div onClick={this.onFocus}>
        {this.renderButtons()}
        <Editor editorState={this.state.editorState}
          className={this.props.className}
          name={this.props.name} ref="editor"
          placeholder={this.props.placeholder}
          handleKeyCommand={this.handleKeyCommand}
          onChange={this.onChange}
          spellCheck={true}
          stripPastedStyles={true}
          customStyleMap={myStyleMap}/>
      </div>);
   }
}

Draft.js 's RichUtils.toggleInlineStyle doesn't work properly. please help! My code is on JSfiddle.

Is there any misunderstood?

var TextArea = React.createClass({
  ...
  toggleBlockStyle: function(blockType) {
    this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType)); // don't work!
  },

  toggleInlineStyle: function(inlineStyle) {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle)); // don't work!
  },

  handleClear: function() {
    this.onChange(EditorState.push(this.state.editorState, 
        ContentState.createFromText(''), 'remove-range')); // don't work!
  },
  ...
  render: function() {
    return (
      <div onClick={this.onFocus}>
        {this.renderButtons()}
        <Editor editorState={this.state.editorState}
          className={this.props.className}
          name={this.props.name} ref="editor"
          placeholder={this.props.placeholder}
          handleKeyCommand={this.handleKeyCommand}
          onChange={this.onChange}
          spellCheck={true}
          stripPastedStyles={true}
          customStyleMap={myStyleMap}/>
      </div>);
   }
}

• javascript
• jquery
• reactjs
• semantic-ui
• draftjs

3 Answers 3

When you use a button to toggle the styles, it causes the editor to e out of focus and the style is not applied. Instead of onClick, use onMouseDown which fires before the editor unfocuses.

I found this fix in a github thread here. Quoted for expedience:

However, using onClick causes the text area to go out of focus and the style isn't toggled. I did some digging and found other solutions that suggested using preventDefault on the onClick function, but that doesn't do anything. With this event handler, the style is toggled only if the text is highlighted first and doesn't allow for the text to be styled prior to typing. I saw another solution that suggested replacing onClick with onMouseDown as it doesn't cause the text area to lose focus. I tried this, and it worked. I also delved into the source code for Draft.js, and in the demo editor code I saw this code:

 //...
  render() {
//...
    return (
      <span className={className} onMouseDown={this.onToggle}>
        {this.props.label}
      </span>
    );
  }
}; 

The reason why its not ing is you need to include the css file available. Include the css file and it will fine. (Draft.css)

https://draftjs/docs/advanced-topics-issues-and-pitfalls/#missing-draftcss

see the last line of the page.

Include the Draft.css file in your app by including the following line where your Draft JS Editor is running.

import "draft-js/dist/Draft.css";

Draft.css should be included when rendering the editor. Learn more about why.