<a href="https://draftjs.org/">Draft.js</a> is an open source library for handling rich text editing with React.
Draft.js handles the storing of the editor state (e.g. text, transformations and undo/redo stack) by storing everything into an EditorState object. It is a complete snapshot of the editor state.
EditorState object itself maintains the undo/redo stack of the editor. This stack is comprised of ContentState objects.
ContentState object represents the contents of the editor (e.g. text, entity ranges and inline styles) and selection states before and after rendering the contents.
Entity ranges is something we won't be touching on this post but if you wish you can read more about them from the <a href="https://draftjs.org/docs/advanced-topics-entities">documentation</a>.
I believe that best way to learn is just start doing so let's dive in and create a basic editor component.
I just published a class where I teach more about Draft.js. Best part is that you can get it for free! <a href="/blog/rich-text-editing-in-react-with-draft-js-course/">Read more</a>.
<h3>Basic Draft.js editor usage</h3>
We are going to make a React component with a Draft.js editor that has basic bold, underline and italic rich text editing functions. I am going to use <a href="/blog/online-code-editor-every-web-developer-should-know-about/">codesandbox.io</a> for this example. You can find the finished sandbox for this tutorial <a href="https://codesandbox.io/s/1z4vl0wz13?module=%2Fsrc%2FMyEditor.js">here</a>. Go ahead and fork it so you can make changes, follow along and play around with it.
First off we need to add Draft.js to our project. In codesandbox you can do this by opening the "File editor" tab from the left and under "Dependencies" click "Add dependency" and search for draft-js.
<img src="./images/codesandbox-draft-js-dependency-1024x733.png" alt="">
Now let's add a new file <code>MyEditor.js</code> which will hold our editor component.
In the <code>MyEditor.js</code> file let's type in the following:
<pre><code class="language-jsx">import React, { Component } from "react";
import { Editor, EditorState } from "draft-js";

const wrapperStyle = {
 border: "1px solid gray", // add some border
 width: "400px", // set fixed width
 margin: "auto", // aligns the component in the middle
 textAlign: "left", // start the text from left hand side
};

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

 render() {
 return (
 &#x3C;div>
 &#x3C;div style={wrapperStyle}>
 &#x3C;Editor
 editorState={this.state.editorState}
 onChange={this.onChange}
 />
 &#x3C;/div>
 &#x3C;/div>
 );
 }
}

export default MyEditor;
</code></pre>
This will render an instance of Draft.js editor and add some styling for the wrapping div. As you can see we are importing <code>Editor</code> and <code>EditorState</code> from the draft-js library. <code>Editor</code> is the actual component for the editor and <code>EditorState</code> is a top-level state object for the editor.
In the constructor we want to define a state for the component. We will store the state of the editor in an <code>editorState</code> variable. We initialize it with <code>EditorState.createEmpty()</code> because it must be a valid <code>EditorState</code> object and <code>EditorState.createEmpty()</code> returns a new <code>EditorState</code> object with an empty <code>ContentState</code> and default configuration.
Because the editor will be a controlled component, we need to define <code>onChange</code> function for it. We define it in the constructor and in it, we will update the component's state with new <code>editorState</code> object.
In the component's render method we render the <code>Editor</code> component with <code>editorState</code> and <code>onChange</code> props. The editor should now look like this.
<img src="./images/editor1-hello-codepulse.jpg" alt="The editor">
We now have a working editor component but we don't yet have any rich text editing functionality in it. So let's add the bold, italic and underline commands to our editor.
Here is the updated code for the <code>MyEditor.js</code> component that includes the functionality for bold, italic and underline features. The changes are highlighted.
<pre><code class="language-jsx">import React, { Component } from "react";
import { Editor, EditorState, RichUtils } from "draft-js";

const wrapperStyle = {
 border: "1px solid gray", // add some border
 width: "400px", // set fixed width
 margin: "auto", // aligns the component in the middle
 textAlign: "left", // start the text from left hand side
};

class MyEditor 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) {
 const { editorState } = this.state;
 const newState = RichUtils.handleKeyCommand(editorState, command);
 if (newState) {
 this.onChange(newState);
 return true;
 }
 return false;
 }

 render() {
 return (
 &#x3C;div>
 &#x3C;button onClick={() => this.handleKeyCommand("bold")}>Bold&#x3C;/button>
 &#x3C;button onClick={() => this.handleKeyCommand("italic")}>Italic&#x3C;/button>
 &#x3C;button onClick={() => this.handleKeyCommand("underline")}>
 Underline
 &#x3C;/button>

 &#x3C;div style={wrapperStyle}>
 &#x3C;Editor
 editorState={this.state.editorState}
 onChange={this.onChange}
 handleKeyCommand={this.handleKeyCommand}
 />
 &#x3C;/div>
 &#x3C;/div>
 );
 }
}

export default MyEditor;
</code></pre>
So first we import <code>RichUtils</code> module from the draft-js library. It contains a set of utility functions for rich text editing.
We pass <code>handleKeyCommand</code> prop for the <code>Editor</code>. This will allow us to handle the key commands.
In the <code>handleKeyCommand</code> method, we use <code>RichUtils.handleKeyCommand</code> function to apply the given command for the current <code>editorState</code>. The command is a string e.g. "bold", "italic" or "underline". The <code>RichUtils.handleKeyCommand</code> function will take care of applying the given style to the <code>editorState</code>. Note that in order for "<code>this</code>" to work inside <code>handleKeyCommand</code> method, we need to add the following line to the constructor:
this.handleKeyCommand = this.handleKeyCommand.bind(this);
We also need to return true / false from the <code>handleKeyCommand</code> method so that the editor knows if the command was handled or not.
Finally we add three buttons in the render method that when clicked, call the <code>handleKeyCommand</code> method with appropriate command. Note that the commands must be lowercase.
<img src="./images/editor2-hello-codepulse.jpg" alt="">
That's it! Now we can highlight text and use either the buttons or the keyboard shortcuts (ctrl/cmd+B, ctrl/cmd+I, ctrl/cmd+U) to apply styles to the text in the editor.
<h3>Conclusion</h3>
We went over how to create a component that handles rich text editing using Draft.js. As we saw, adding rich text editing to React component is not that complicated. Hopefully this tutorial helped you in getting started with Draft.js. If you have any questions or comments be sure to drop them into the comment section! All comments are appreciated!
<h3>Want to know more?</h3>
I have also written about <a href="/blog/how-to-display-draft-js-content-as-html/">How to display Draft.js content as HTML</a> and <a href="/blog/how-to-store-draft-js-content/">How to store Draft.js content</a>. So be sure to check those out too!

[Draft.js](https://draftjs.org/) is an open source library for handling rich text editing with React.

Draft.js handles the storing of the editor state (e.g. text, transformations and undo/redo stack) by storing everything into an EditorState object. It is a complete snapshot of the editor state.

EditorState object itself maintains the undo/redo stack of the editor. This stack is comprised of ContentState objects.

ContentState object represents the contents of the editor (e.g. text, entity ranges and inline styles) and selection states before and after rendering the contents.

_Entity ranges is something we won't be touching on this post but if you wish you can read more about them from the [documentation](https://draftjs.org/docs/advanced-topics-entities)._

I believe that best way to learn is just start doing so let's dive in and create a basic editor component.

_I just published a class where I teach more about Draft.js. Best part is that you can get it for free! [Read more](/blog/rich-text-editing-in-react-with-draft-js-course/)._

### Basic Draft.js editor usage

We are going to make a React component with a Draft.js editor that has basic bold, underline and italic rich text editing functions. I am going to use [codesandbox.io](/blog/online-code-editor-every-web-developer-should-know-about/) for this example. You can find the finished sandbox for this tutorial [here](https://codesandbox.io/s/1z4vl0wz13?module=%2Fsrc%2FMyEditor.js). Go ahead and fork it so you can make changes, follow along and play around with it.

First off we need to add Draft.js to our project. In codesandbox you can do this by opening the "File editor" tab from the left and under "Dependencies" click "Add dependency" and search for draft-js.

![](/blog-posts/getting-started-with-draft-js/images/codesandbox-draft-js-dependency-1024x733.png)

Now let's add a new file `MyEditor.js` which will hold our editor component.

In the `MyEditor.js` file let's type in the following:

```jsx
import React, { Component } from "react";
import { Editor, EditorState } from "draft-js";

const wrapperStyle = {
 border: "1px solid gray", // add some border
 width: "400px", // set fixed width
 margin: "auto", // aligns the component in the middle
 textAlign: "left", // start the text from left hand side
};

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

 render() {
 return (
 <div>
 <div style={wrapperStyle}>
 <Editor
 editorState={this.state.editorState}
 onChange={this.onChange}
 />
 </div>
 </div>
 );
 }
}

export default MyEditor;
```

This will render an instance of Draft.js editor and add some styling for the wrapping div. As you can see we are importing `Editor` and `EditorState` from the draft-js library. `Editor` is the actual component for the editor and `EditorState` is a top-level state object for the editor.

In the constructor we want to define a state for the component. We will store the state of the editor in an `editorState` variable. We initialize it with `EditorState.createEmpty()` because it must be a valid `EditorState` object and `EditorState.createEmpty()` returns a new `EditorState` object with an empty `ContentState` and default configuration.

Because the editor will be a controlled component, we need to define `onChange` function for it. We define it in the constructor and in it, we will update the component's state with new `editorState` object.

In the component's render method we render the `Editor` component with `editorState` and `onChange` props. The editor should now look like this.

![The editor](/blog-posts/getting-started-with-draft-js/images/editor1-hello-codepulse.jpg)

We now have a working editor component but we don't yet have any rich text editing functionality in it. So let's add the **bold**, _italic_ and underline commands to our editor.

Here is the updated code for the `MyEditor.js` component that includes the functionality for bold, italic and underline features. The changes are highlighted.

```jsx
import React, { Component } from "react";
import { Editor, EditorState, RichUtils } from "draft-js";

const wrapperStyle = {
 border: "1px solid gray", // add some border
 width: "400px", // set fixed width
 margin: "auto", // aligns the component in the middle
 textAlign: "left", // start the text from left hand side
};

class MyEditor 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) {
 const { editorState } = this.state;
 const newState = RichUtils.handleKeyCommand(editorState, command);
 if (newState) {
 this.onChange(newState);
 return true;
 }
 return false;
 }

 render() {
 return (
 <div>
 <button onClick={() => this.handleKeyCommand("bold")}>Bold</button>
 <button onClick={() => this.handleKeyCommand("italic")}>Italic</button>
 <button onClick={() => this.handleKeyCommand("underline")}>
 Underline
 </button>

 <div style={wrapperStyle}>
 <Editor
 editorState={this.state.editorState}
 onChange={this.onChange}
 handleKeyCommand={this.handleKeyCommand}
 />
 </div>
 </div>
 );
 }
}

export default MyEditor;
```

So first we import `RichUtils` module from the draft-js library. It contains a set of utility functions for rich text editing.

We pass `handleKeyCommand` prop for the `Editor`. This will allow us to handle the key commands.

In the `handleKeyCommand` method, we use `RichUtils.handleKeyCommand` function to apply the given command for the current `editorState`. The command is a string e.g. "bold", "italic" or "underline". The `RichUtils.handleKeyCommand` function will take care of applying the given style to the `editorState`. Note that in order for "`this`" to work inside `handleKeyCommand` method, we need to add the following line to the constructor:

this.handleKeyCommand = this.handleKeyCommand.bind(this);

We also need to return true / false from the `handleKeyCommand` method so that the editor knows if the command was handled or not.

Finally we add three buttons in the render method that when clicked, call the `handleKeyCommand` method with appropriate command. Note that the commands must be lowercase.

![](/blog-posts/getting-started-with-draft-js/images/editor2-hello-codepulse.jpg)

That's it! Now we can highlight text and use either the buttons or the keyboard shortcuts (ctrl/cmd+B, ctrl/cmd+I, ctrl/cmd+U) to apply styles to the text in the editor.

### Conclusion

We went over how to create a component that handles rich text editing using Draft.js. As we saw, adding rich text editing to React component is not that complicated. Hopefully this tutorial helped you in getting started with Draft.js. If you have any questions or comments be sure to drop them into the comment section! All comments are appreciated!

### Want to know more?

I have also written about [How to display Draft.js content as HTML](/blog/how-to-display-draft-js-content-as-html/) and [How to store Draft.js content](/blog/how-to-store-draft-js-content/). So be sure to check those out too!

Getting started with Draft.js can be a bit confusing. In this post we will cover how to get started by creating an Editor component capeable for RTE.

Getting started with Draft.js

When programming, or even just using my computer, I try to avoid using mouse as much as possible and do everything I can with just keyboard. It is just so much faster and convenient to keep your hands on the keyboard and not have to switch between keyboard and mouse. I'm sure I'm not alone with this. This is where keyboard shortcuts come in.
Many common tasks that I do every day and many times a day can be handled with keyboard shortcuts instead of using the mouse. Knowing your way around the keyboard will also increase your text / code editing speed. After all, using keyboard efficiently will boost your overall productivity.
Here are some of the keyboard shortcuts that I use almost every day. I am personally using Mac so these will be for Mac. Most of them should work also on Windows. You just replace the <code>Command</code> key with <code>Ctrl</code> and <code>Option</code> with <code>Alt</code>. Also note that the tab related hotkeys for browsers also work in other programs that have tabs e.g. Visual Studio Code, Atom, Sublime Text etc.
<hr>
<code>Command</code> + <code>T</code>
Opens a new tab in the browser.
<hr>
<code>Command</code> + <code>Shift</code> + <code>T</code>
Reopens previously closed tab in browser.
<hr>
<code>Command</code> + <code>W</code>
Closes current tab in browser.
<hr>
<code>Control</code> + <code>Tab</code>
Move to next tab in a browser.
<hr>
<code>Control</code> + <code>Shift</code> + <code>Tab</code>
Move to previous tab in browser.
<hr>
<code>Command</code> + <code>L</code>
Focus cursor to the address bar in browser.
<hr>
<code>Option</code> + <code>Arrow right</code> / <code>Arrow left</code>
Move the cursor word by word in text editor.
<hr>
<code>Option</code> + <code>Backspace</code>
Remove previous word.
<hr>
<code>Command</code> + <code>Backspace</code>
Remove everything before the cursor on the line.
<hr>
<code>fn</code> + <code>Backspace</code>
Remove next character on the row.
<hr>
<code>fn</code> + <code>Option</code> + <code>Backspace</code>
Remove the next word on the line.
<hr>
<code>Command</code> + <code>R</code>
Refresh current webpage.
<hr>
<code>Command</code> + <code>Shift</code> + <code>R</code>
Perform a "hard" refresh on a current webpage. This refresh is different from a normal refresh by the fact that it will download all the page assets (javascript, images, styles...) from the server even if they are cached.
<hr>
<h2>Wrapping up</h2>
These were some basic keyboard shortcuts that I use. Hopefully you learned something new from them. If you think I missed some great shortcut go ahead and tell me about it in the comments!


When programming, or even just using my computer, I try to avoid using mouse as much as possible and do everything I can with just keyboard. It is just so much faster and convenient to keep your hands on the keyboard and not have to switch between keyboard and mouse. I'm sure I'm not alone with this. This is where keyboard shortcuts come in.

Many common tasks that I do every day and many times a day can be handled with keyboard shortcuts instead of using the mouse. Knowing your way around the keyboard will also increase your text / code editing speed. After all, using keyboard efficiently will boost your overall productivity.

Here are some of the keyboard shortcuts that I use almost every day. I am personally using Mac so these will be for Mac. Most of them should work also on Windows. You just replace the `Command` key with `Ctrl` and `Option` with `Alt`. Also note that the tab related hotkeys for browsers also work in other programs that have tabs e.g. Visual Studio Code, Atom, Sublime Text etc.

---

`Command` + `T`

Opens a new tab in the browser.

---

`Command` + `Shift` + `T`

Reopens previously closed tab in browser.

---

`Command` + `W`

Closes current tab in browser.

---

`Control` + `Tab`

Move to next tab in a browser.

---

`Control` + `Shift` + `Tab`

Move to previous tab in browser.

---

`Command` + `L`

Focus cursor to the address bar in browser.

---

`Option` + `Arrow right` / `Arrow left`

Move the cursor word by word in text editor.

---

`Option` + `Backspace`

Remove previous word.

---

`Command` + `Backspace`

Remove everything before the cursor on the line.

---

`fn` + `Backspace`

Remove next character on the row.

---

`fn` + `Option` + `Backspace`

Remove the next word on the line.

---

`Command` + `R`

Refresh current webpage.

---

`Command` + `Shift` + `R`

Perform a "hard" refresh on a current webpage. This refresh is different from a normal refresh by the fact that it will download all the page assets (javascript, images, styles...) from the server even if they are cached.

---

## Wrapping up

These were some basic keyboard shortcuts that I use. Hopefully you learned something new from them. If you think I missed some great shortcut go ahead and tell me about it in the comments!


Here is 13 basic and easy keyboard shortcuts that will instantly increase your productivity.

13 Keyboard shortcuts you should be using to increase your productivity

Focusing elements with plain Javascript is quite easy. You get the element for example with id and call <code>focus()</code> on it e.g. <code>document.getElementById("myAnchor").focus()</code> and that's it. But how can you focus element in React since you can't get the element by id, class or type, like you would with plain Javascript?
The answer is: React Refs!
<a href="http://www.youtube.com/watch?v=mqP_qNViGUQ"><img src="http://img.youtube.com/vi/mqP_qNViGUQ/0.jpg" alt="5 Tips for Successful Remote Work"></a>
<h2>React Refs</h2>
<a href="https://reactjs.org/docs/refs-and-the-dom.html">Refs</a> can be used to access DOM nodes or React components that are rendered in the render method. Refs are created with <code>React.createRef()</code> function. Refs can then be assigned to an element with ref-attribute. Following example shows a component that will focus to the text input when rendered.
<pre><code class="language-jsx">class AutoFocusTextInput extends React.Component {
 constructor(props) {
 super(props);
 this.textInput = React.createRef();
 }

 componentDidMount() {
 this.textInput.current.focus();
 }

 render() {
 return &#x3C;input ref={this.textInput} />;
 }
}
</code></pre>
So we create the ref in the constructor and assign it for <code>textInput</code> variable. Then in the <code>render()</code> method we render our input and set ref-attribute to equal the <code>textInput</code> variable. To get the input autofocus when the component is rendered, we call <code>focus()</code> on the <code>textInput</code> variable in the <code>componentDidMount()</code> method. Note that in order to access the DOM element of the ref we need to use the ref's <code>current</code> property.
<h2>React &#x3C; 16.3</h2>
The example above uses <code>React.createRef()</code> API for creating refs. It was introduced in React 16.3. If you are using an earlier version of React you should use <a href="https://reactjs.org/docs/refs-and-the-dom.html#callback-refs">callback refs</a>.
With callback refs we need to pass a function (instead of ref attribute created by <code>React.createRef()</code>) for the input's ref-attribute. The function receives DOM element as its argument which can be stored and accessed elsewhere. So the <code>AutoFocusTextInput</code> component would look like following with callback refs.
<pre><code class="language-jsx">class AutoFocusTextInput extends React.Component {
 constructor(props) {
 super(props);
 this.textInput = null;
 }

 componentDidMount() {
 this.textInput.focus();
 }

 render() {
 return &#x3C;input ref={(elem) => (this.textInput = elem)} />;
 }
}
</code></pre>
In the constructor we define <code>textInput</code> variable and set it to <code>null</code>. Then in the <code>render()</code> method we pass a function which assigns the element, given as parameter, for the <code>textInput</code> variable. In the <code>componentDidMount()</code> method we now call <code>focus()</code> directly to the <code>textInput</code> variable since it is now the DOM element.
<h2>Wrapping up</h2>
Focusing inputs with React is a bit different than with plain Javascript. But once you get the hang of it, it's quite straight forward. Depending on the React version in use, you have two options , from which to choose from, for implementing refs.
In case you want to try and play around with refs and focusing (with both ways), <a href="https://codesandbox.io/s/xo7ozwqx9q">here is a codesandbox</a> I created. There you can find two components <code>Refs163</code> and <code>Refs162</code> which implement refs both with <code>React.createRef()</code> and with callback refs.
If you are interested in learning more about React, I recommend you check out <a href="https://amzn.to/31dUD7G">The Road to learn React</a> by Robin Wieruch and <a href="https://amzn.to/2YxTc2g">React Quickly</a> by Azat Mardan. Both of these are great resources for learning React and should be found from any serious React developer's bookshelf.
That's it for now! If you have any questions or comments, be sure to leave them in the comment section!

Focusing elements with plain Javascript is quite easy. You get the element for example with id and call `focus()` on it e.g. `document.getElementById("myAnchor").focus()` and that's it. But how can you focus element in React since you can't get the element by id, class or type, like you would with plain Javascript?

The answer is: React Refs!

[![5 Tips for Successful Remote Work](http://img.youtube.com/vi/mqP_qNViGUQ/0.jpg)](http://www.youtube.com/watch?v=mqP_qNViGUQ)

## React Refs

[Refs](https://reactjs.org/docs/refs-and-the-dom.html) can be used to access DOM nodes or React components that are rendered in the render method. Refs are created with `React.createRef()` function. Refs can then be assigned to an element with ref-attribute. Following example shows a component that will focus to the text input when rendered.

```jsx
class AutoFocusTextInput extends React.Component {
 constructor(props) {
 super(props);
 this.textInput = React.createRef();
 }

 componentDidMount() {
 this.textInput.current.focus();
 }

 render() {
 return <input ref={this.textInput} />;
 }
}
```

So we create the ref in the constructor and assign it for `textInput` variable. Then in the `render()` method we render our input and set ref-attribute to equal the `textInput` variable. To get the input autofocus when the component is rendered, we call `focus()` on the `textInput` variable in the `componentDidMount()` method. Note that in order to access the DOM element of the ref we need to use the ref's `current` property.

## React < 16.3

The example above uses `React.createRef()` API for creating refs. It was introduced in React 16.3. If you are using an earlier version of React you should use [_callback refs_](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs).

With callback refs we need to pass a function (instead of ref attribute created by `React.createRef()`) for the input's ref-attribute. The function receives DOM element as its argument which can be stored and accessed elsewhere. So the `AutoFocusTextInput` component would look like following with callback refs.

```jsx
class AutoFocusTextInput extends React.Component {
 constructor(props) {
 super(props);
 this.textInput = null;
 }

 componentDidMount() {
 this.textInput.focus();
 }

 render() {
 return <input ref={(elem) => (this.textInput = elem)} />;
 }
}
```

In the constructor we define `textInput` variable and set it to `null`. Then in the `render()` method we pass a function which assigns the element, given as parameter, for the `textInput` variable. In the `componentDidMount()` method we now call `focus()` directly to the `textInput` variable since it is now the DOM element.

## Wrapping up

Focusing inputs with React is a bit different than with plain Javascript. But once you get the hang of it, it's quite straight forward. Depending on the React version in use, you have two options , from which to choose from, for implementing refs.

In case you want to try and play around with refs and focusing (with both ways), [here is a codesandbox](https://codesandbox.io/s/xo7ozwqx9q) I created. There you can find two components `Refs163` and `Refs162` which implement refs both with `React.createRef()` and with _callback refs_.

If you are interested in learning more about React, I recommend you check out [The Road to learn React](https://amzn.to/31dUD7G) by Robin Wieruch and [React Quickly](https://amzn.to/2YxTc2g) by Azat Mardan. Both of these are great resources for learning React and should be found from any serious React developer's bookshelf.

That's it for now! If you have any questions or comments, be sure to leave them in the comment section!

How can you focus element in React since you can't get the element by id, class or type, like you would with plain Javascript? The answer is...

13 Keyboard shortcuts you should be using to increase your productivity

Wrapping up

Subscribe to the newsletter