Let’s Build a Fast, Slick and Customizable Rich Text Editor With Slate.js and React — Part II

Now, let’s make it pretty

What we will end up by the end of this article

This is a fun series about building a rich text editor with React and Slate. Here’s part I — you’ll want to read it first if you haven’t already!

Let’s build a fast, slick and customizable rich text editor with Slate and React

Full Speed Ahead

The editor has to look sharp. Who wants to look at, and use, a scruffy editor? Let’s add some quick CSS to make it look more spectacular.

In a traditional create-react-app, we have the index.css file inside the src folder. index.css is used to apply “global” styles for our app. With global styles, I’m keeping the DOM elements that apply to all pages/documents in mind. For example body and html.

Applying system fonts, background colors, paddings, margins, colors and the width for our editor.

If you’re curious about what kind of shenanigans are going on with the font-family — listen up. We’re defaulting to the font(s) the user has installed on their computer. This adds a performance boost, since there is no need to download the fonts.

Check out this clever explanation by css-tricks for more detail.

System Font Stack | CSS-Tricks

We should end up with something smarter.

Our freshly minted app

Key Features of a Rich Text Editor

• Images.
• Headers.
• Code highlighting.
• Embedded Videos.
• Text formatting (alignment, bullet list, ordered…