How to style Draft.js editor

In this post we will take a look how you can style your Draft.js editor component. We will make the editor multiline, scrollable and add background and border styles. Draft.js itself does not provide any default styling for the editor and thus the styling of the editor has been left completely for the user. However it might be a bit unclear how to style Draft.js editor so that is what we will learn in this post.

You can learn more about Draft.js in my online course, which you can get for free (limited time offer)! Read more.

Style Draft.js editor

Let’s first create a very basic editor component. I am going to use the one shown in Draft.js docs.

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
        <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}

Now if we render this component we can see that it is basically a text input without any borders (we can’t really see it) and it has just one line. This is rarely what we want. So let’s inspect it with dev-tools in order to get a better picture how we can style it.

From the dev-tools we can see that there is three divs that have the following classes: DraftEditor-root, DraftEditor-editorContainer and public-DraftEditor-content. We can target these three classes with our CSS in order to style the editor.

So let’s say we want our editor to have the height of 200px and width of 300px. We also want it to have black border and beige background. This is what it would look like.

We need to add the border, background-color, height and width properties to the DraftEditor-root element. We should also add overflow-y: auto for it so the editor is scrollable. But if we do just this, the writeable are is still the height of one row. So what we still need to do is add height: 100% to the elements with class DraftEditor-editorContainer and public-DraftEditor-content. We can add these styles to styles.css file which would look like this.

div.DraftEditor-root {
  border: 1px solid #000;
  background-color: beige;
  height: 200px;
  width: 300px;
  overflow-y: auto;
}
div.DraftEditor-editorContainer,
div.public-DraftEditor-content {
  height: 100%;
}

Finally let’s import the styles.css so the styles are applied.

import './styles.css';

Here is a codesandbox for the complete component. Below is a video of me doing this example.

Conclusion

Styling Draft.js editor doesn’t differ from styling any other html elements. The trick is that you need to understand what Draft.js editor component renders to the DOM and then target the rendered elements correctly. As we saw the basic styling can be pretty much done by targeting the three elements that are rendered to the DOM by the editor component.

TL;DR

Here is a codesandbox for this example. Style the editor by targeting these three classes: DraftEditor-root, DraftEditor-editorContainer and public-DraftEditor-content.

Also remember to subscribe to my newsletter, to stay tuned on the latest news and posts about modern web development. I also share exclusive tips and tricks for the newsletter subscribers! You can subscribe here.

---

Originally published at tuomokankaanpaa.com on June 16, 2019.

Comments

[Rohit Kiran Sawai]

Thank you for explaining the Overflow-Y. I just wanna ask a thing. Now I have aaded Overflow-Y but it shows me scrollbar before adding any text which I dont' want. How can I make it auto display when complete textarea will fill?

[lvdang]

Tuoma,

One thing I did notice, might be a draftjs issue. If you go to the very bottom then click on 'Enter' it works fine then if you up arrow up the the previous line then hit 'Enter' notice the cursor doesn't go to the next line . Hope that makes sense.

Luan

[Tuomo Kankaanpää]

Hi! If you want to show the scrollbar only when needed, you should use the value "auto" for the overflow-y property. So overflow-y: auto should set it visible only when needed.

[Rohit Kiran Sawai]

I did the same what you have said but then also I can see scrollbar. What would be the issue?

[Tuomo Kankaanpää]

That's weird, it should work straight out of the box just with the overflow-y: auto. I am afraid it is hard to tell the issue without any code example.

[lvdang]

Thanks for the article. I tried to add the 'overflow-y: auto' with height: 50px from draftjs.org however when hitting 'Enter' the scroll doesn't follow but on your example it does. What am I doing wrong here. Refer to the bottom right with the 'overflow-y: auto' and height: 50px modification.

[Tuomo Kankaanpää]

Hi Ivdang! Could you share e.g. a codesandbox link with your code and I can take a look :)

[lvdang]

Tuoma,

Sorry for the late response. I am going to attempt this with draft-js-plugins-editor. My project is wrapped in this library. If you have tried already please let me know.

Thanks,
Luan Dang

[lvdang]

Tuoma,

I figured out my issue. I had position: relative in my draftjs blocks and imported Draft.css, this caused me issue. I decided to use display: flex and changed position: static since Draft.css sets DraftEditor-root to position : relative. Thanks again.

Luan

[Tuomo Kankaanpää]

Great to hear that you got it working!