I am trying to add a rich text editor using draft.js to a react project. I have been able to add it and also handle keyboard commands by following their docs. I have also added two buttons to do bold and italics but the problem is that when am clicking on the button the editor state doesn't change and no inline style is being added but if I select the text and click on the button the style is added to that text. I can't understand where am I doing wrong.

import React, { Component } from 'react';
import {Editor, EditorState, RichUtils} from 'draft-js';
import './App.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {editorState: EditorState.createEmpty()};
        this.onChange = (editorState) => this.setState({editorState});
        this.handleKeyCommand = this.handleKeyCommand.bind(this);
    }

    handleKeyCommand(command, editorState) {
        const newState = RichUtils.handleKeyCommand(editorState, command);
        if (newState) {
            this.onChange(newState);
            return 'handled';
        }
        return 'not-handled';
    }

    _onBoldClick() {
        this.onChange(RichUtils.toggleInlineStyle(
            this.state.editorState, 'BOLD'));
    }

    _onItalicClick() {
        this.onChange(RichUtils.toggleInlineStyle(
            this.state.editorState, 'ITALIC'));
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <h1 className="App-title">Text formatting using Draft.js</h1>
                </header>
                <div className="toolbar">
                    <button className="btn" onClick={this._onBoldClick.bind(this)}>B</button>
                    <button className="btn" onClick={this._onItalicClick.bind(this)}>I</button>
                </div>
                <div className="notePage">
                    <Editor
                        editorState={this.state.editorState}
                        handleKeyCommand={this.handleKeyCommand}
                        onChange={this.onChange}
                        isCollapsed="true"
                    />
                </div>
            </div>
        );
    }
}

I am trying to add a rich text editor using draft.js to a react project. I have been able to add it and also handle keyboard commands by following their docs. I have also added two buttons to do bold and italics but the problem is that when am clicking on the button the editor state doesn't change and no inline style is being added but if I select the text and click on the button the style is added to that text. I can't understand where am I doing wrong.

import React, { Component } from 'react';
import {Editor, EditorState, RichUtils} from 'draft-js';
import './App.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {editorState: EditorState.createEmpty()};
        this.onChange = (editorState) => this.setState({editorState});
        this.handleKeyCommand = this.handleKeyCommand.bind(this);
    }

    handleKeyCommand(command, editorState) {
        const newState = RichUtils.handleKeyCommand(editorState, command);
        if (newState) {
            this.onChange(newState);
            return 'handled';
        }
        return 'not-handled';
    }

    _onBoldClick() {
        this.onChange(RichUtils.toggleInlineStyle(
            this.state.editorState, 'BOLD'));
    }

    _onItalicClick() {
        this.onChange(RichUtils.toggleInlineStyle(
            this.state.editorState, 'ITALIC'));
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <h1 className="App-title">Text formatting using Draft.js</h1>
                </header>
                <div className="toolbar">
                    <button className="btn" onClick={this._onBoldClick.bind(this)}>B</button>
                    <button className="btn" onClick={this._onItalicClick.bind(this)}>I</button>
                </div>
                <div className="notePage">
                    <Editor
                        editorState={this.state.editorState}
                        handleKeyCommand={this.handleKeyCommand}
                        onChange={this.onChange}
                        isCollapsed="true"
                    />
                </div>
            </div>
        );
    }
}

• javascript
• reactjs
• draftjs

2 Answers 2

This happens because by default onClick causes Editor to lose focus. To resolve this, do the following:

  _onBoldClick (e) {
    e.preventDefault()
    this.onChange(RichUtils.toggleInlineStyle(
            this.state.editorState, 'BOLD'))
  }

  _onItalicClick (e) {
    e.preventDefault()
    this.onChange(RichUtils.toggleInlineStyle(
            this.state.editorState, 'ITALIC'))
  }

and change onClick to onMouseDown:

<button className='btn' onMouseDown={this._onBoldClick.bind(this)}>B</button>

<button className='btn' onMouseDown={this._onItalicClick.bind(this)}>I</button>

Additional Note

Always include Draft.css at the top:

import 'draft-js/dist/Draft.css'

From the documentation:

This CSS should be included when rendering the editor, as these styles set defaults for text alignment, spacing, and other important features. Without it, you may encounter issues with block positioning, alignment, and cursor behavior.

you can try like this in react 16 with hooks, just pass e and it will work,

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState, RichUtils} from 'draft-js';
import 'draft-js/dist/Draft.css';
import './MyEditor.css'

export default function MyEditor() {
  
  const [editorState, setEditorState] = React.useState(
    () => EditorState.createEmpty(),
  );

  
  // tried with onclick (but not working as expected) so used mousedown event 
  const _onBoldClick = () => {
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'))
  }  
  const _onBoldMouseDown = (e) => {
    e.preventDefault();
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'))
  }

  const _onItalicMouseDown = (e) => {
    e.preventDefault();
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'ITALIC'))
  }

  const _onUnderlineMouseDown = (e) => {
    e.preventDefault();
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'UNDERLINE'))
  }

  return(
    <div>
        <button onMouseDown={ e => { _onBoldMouseDown(e) } }>B</button>
        <button onMouseDown={ e => { _onItalicMouseDown(e) } }><i>I</i></button>
        <button onMouseDown={ e => { _onUnderlineMouseDown(e) } }>U</button>

        <div>
          <Editor 
            textAlignment="left" placeholder="Enter something here" 
            editorState={editorState} onChange={setEditorState} />
        </div>
        
    </div>
  ) 
  
    
}

//ReactDOM.render(<MyEditor />, document.getElementById('container'));