Indrek Lasn
Jul 15, 2018 · 6 min read

What Is a Rich Text Editor?

A rich text editor’s aim is to reduce the effort for users trying to express their formatting as valid HTML markup. A rich text editor gives users the option to format their text.

Everyone has used a rich text editor at some point. So why not build one? Here are some of the most used rich text editors.

  • Reddit, YouTube, and Hacker News comments.
Reddit comments section
  • Online editors for producing content — writing blogs, tutorials, news, etc.
Medium
  • Twitter tweets, mentions, hashtags, polls, lists, etc.
  • Editing documents and excel sheets, like Google Docs, Microsoft Word, Dropbox Paper.

Draft.js

In 2016, Facebook open sourced their new rich text editor framework, called Draft.js.

https://github.com/facebook/draft-js

Here’s the Draft.js introductory talk. It’s worth watching the 25 minute video to understand what kind of problems the Facebook team ran into, and how they solved them.


Slate.js

Ian Storm Taylor created Slate.js, shortly after Facebook open sourced Draft.js.

Here’s a Hacker News thread discussion about Slate.js.

The arguments for creating Slate are sound. Let’s check it out by creating a rich text editor.


Getting Started

The rich text editor we will build

We’ll need the following for this project:

  • Text editor, any will do, feel free to choose.
  • Node.js installed with npm/Yarn.
  • Basic JavaScript knowledge. If you’re learning the ropes — this list for learning JavaScript might be useful to you.

Let’s go!

TK missing code? Fire up your terminal and create a new React project with create-react-app.

Booting up our React app

Slate exposes a set of modules that you’ll use to build your editor. The most important one is the Editor component. The Editor component is the fundamental layer everything will be built upon. Think of it as the root component for the whole editor.

Starting off, we will create a folder components. Inside the components directory, we’ll create two files called index.js and TextEditor.js.

If we open the browser, this is what we should see.

TK missing code. No problem! The Editor component expects an initial value — as you can see in the source code.

See the last propType — it’s set to isRequired

Let’s add our initial value to the editor. We’ll dive into the exact model of the data later, once we have a basic understanding of how Slate works.

We should end up with My first paragraph! rendered on our app.

A paragraph being rendered

At first, the text looks like a simple <p> paragraph. But if we inspect the element, there’s an ocean of complexity abstracted away from us.

Try clicking on the text. What do you see?

Editable text — notice the complex hierarchy of DOM elements. This is all abstracted away from us under the hood and we can focus on building our “product”.

The text is editable! In case you don’t have the React developer tools, here’s a link to the Chrome app store.

Remember that we added an onChange event listener to our Editor component.

  1. The onChange event listener is listening for keyboard events.
  2. After catching a keystroke.
  3. We update the current state with the new keystroke.
  4. Dispatch the new state.
  5. Render a new state on the screen.

However, the editor is not very useful to us yet. We’re missing key features, like formatting, saving our text somewhere, and many more.


Adding Custom Formatting

It’s common to have big header, subheader, italic, bold, code, etc. formatted text.

Let’s think about the next steps for formatting text.

Common practice is to start by pressing a command key, like ctrl or cmd. Pressing the command key tells the editor we’re editing and not typing.

For example, what we could do is the following: cmd ⌘+ b or alt + b is for adding bold to our selected text.

Our flow will look like this:

  1. Listen for events/keystrokes.

2. Distinguish the keys pressed, was it alt, cmd or b, and in what order? And what happens if those keys were indeed pressed?

3. Trigger the actual text change with the desired formatting.

Start by adding a onKeyDown event for the Editor and pass in the callback.

Adding the onKeyDown event listener

We know what key the user pressed. Let’s make something happen, depending on which keystroke is being pressed.

Good, now we have all the logic in place. If the user pressed alt + b, change the text to bold. How do you think we should approach the styling?

One way is to create a new reusable component called BoldMark.js, that we can reuse every time we want bold text.

Creating a reusable component for bold text
importing and exporting the new component

The Editor component has a prop, called renderMark, which accepts a callback. Inside the renderMark we can decide how to style the text.

Importing the BoldMark component

Go on, try it out! Select the text and press alt + b:

It works! Notice that the BoldMark component is being rendered inside the VDOM.

One more question. What happens if we change our mind? We want to undo the bold markup.

Slate has you covered. Instead of adding the addMark(‘bold’ ), we can use toggleMark(‘bold’):

Notice the toggleMark method instead of addMark
Testing our toggleMark method in the browser

To top it off, can you add the same functionality, but for italic?


Italic

Create the italic mark component.
Import and export.

Next up, let’s include the functionality to our Editor.

Checking if the key press was i

And including the component in our renderMark method.

including a case for the italic mark type

Try it out!

Toggling between regular and italic font

We’re getting there, and there is so much more we will accomplish.

See you at part II!

Source code on Github:

Note: If you want to bring your React game to the next level, start from this book.

Thanks for reading!

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Simplicity matters. Grow together. Follow me on Twitter @ https://twitter.com/lasnindrek co-founder @ https://getnewly.com/

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade