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.
- Online editors for producing content — writing blogs, tutorials, news, etc.
- Twitter tweets, mentions, hashtags, polls, lists, etc.
- Editing documents and excel sheets, like Google Docs, Microsoft Word, Dropbox Paper.
In 2016, Facebook open sourced their new rich text editor framework, called 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.
We’ll need the following for this project:
- Text editor, any will do, feel free to choose.
- Node.js installed with npm/Yarn.
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
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.
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.
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?
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
onChangeevent listener is listening for keyboard events.
- After catching a keystroke.
- We update the current state with the new keystroke.
- Dispatch the new state.
- 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:
- Listen for events/keystrokes.
2. Distinguish the keys pressed, was it
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.
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.
Editor component has a prop, called
renderMark, which accepts a callback. Inside the
renderMark we can decide how to style the text.
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
To top it off, can you add the same functionality, but for italic?
Next up, let’s include the functionality to our
And including the component in our
Try it out!
We’re getting there, and there is so much more we will accomplish.
Let’s build a fast, slick and customizable rich text editor with Slate.js and React — Part II
Now, let’s make it pretty
Source code on Github:
Let's build a customizable rich text editor with Slate and React - indreklasn/slate-react-rich-text-editor
Note: If you want to bring your React game to the next level, start from this book.
Thanks for reading!