Images

Let’s start by adding the images.

Rich text editors have a toolbar that make your editing easier. Take a look at Medium’s toolbar.

Medium’s toolbar for formatting

When we click on a selected text, a popup toolbar allows us to format our text.

It makes sense to start implementing the toolbar first, and then hook it up with the appropriate functionality.

Let’s grab a small library which gives us access to a huge array of icons.

The icons we want to use are feather icons.

I suggest creating a component that holds all the formatting logic and styles in one place. Call it FormatToolbar.js and place it inside components .

The FormatToolbar is a stateless component that renders its content due to using props.children .

A stateless component is a component that doesn’t make use of the this.state mechanism, but rather lets its parent figure out the state.

Think of it this way; we want to separate concerns as much as possible. A stateless component handles rendering the view ( divs , spans , images ), and only the view.

A stateful container takes care of its internal state , and passes it as props to the stateless components.

props.children allows you to nest components inside a component.

If you’re unsure about props.children — the article below is good at explaining the concept behind children props in React.

Next up, we will import the FormatToolbar.js component to our TextEditor.js .

Importing our icons to the TextEditor component

And finally, consume our FormatToolbar like this:

Passing our toolbar component to the editor render function

I also added some styles to make it look neat. Remember, the .format-toolbar is our container component that holds all the icons. We set it to flex, so they’re all nicely aligned in a row and start from the left.

We’ve also removed the default border from our button, since we’re going for the clean/minimalist approach.

Applying styles to our tooltip

Terminology: The toolbar is the full row and the tooltip is a single item/collection.

What gets rendered on the screen

Great, it’s starting to look like an actual rich text editor. Nice work.