How to add a rich text editor in your React app using draft-js and react-draft-Wysiwyg.

Hire the author: Hadijah K

In this article, we are going to create a react app and add a rich text editor using the draftjs library and react-draft-wysiwyg. Rich text editors are important in applications because of their extended functionalities and text formattings.

There are a number of frameworks that one can use for rich text editors but we shall choose draft.js because of its precedence over the others.

• Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.
• Draft.js allows you to build any type of rich text input, whether you’re only looking to support a few inline text styles or building a complex text editor for composing long-form articles.

Image source: https://i.ytimg.com/vi/1wS_jGp1UfM/maxresdefault.jpg

Glossary

• Wysiwyg – A WYSIWYG (pronounced “wiz-ee-wig”) editor or program is one that allows a developer to see what the end result will look like while the interface or document is being created. WYSIWYG is an acronym for “what you see is what you get”.
• CDN – A content delivery network, or content distribution network, is a geographically distributed network of proxy servers and their data centers. The goal is to provide high availability and performance by distributing the service spatially relative to end users. In this case we are using the bootstrap CDN link.

Prerequisites

• Nodejs installed on your machine.
• Git installed on your machine.
• Yarn or npm installed.
• Some knowledge about React Apps(if you are a beginner still don’t worry, try to catch up).

What we expect to achieve by the end

• Having a Controlled editor component with the conversion of content from and to HTML. A Wysiwyg Built on ReactJS and Draft-JS.
• Right below the editor, we shall have a representation of the underlying HTML that is generated by the editor. When one clicks the preview button, you see the parsed HTML(how it actually looks).

Create a react app first

Go into the directory where you want to keep your application, maybe desktop or downloads or anywhere.

• In the command line, type this

npx create-react-app myapp

• Once it is successful, you should see.

• When you open the application in a text editor like Vscode or sublime, the folder structure should be as follows.

myapp-|
      |__node_mudles/
      |__public/
      |__src/
      |__.gitignore
      |__pacakge.json
      |__README.md
      |__yarn.lock

Add draft-js and react-draft-wysiwyg to the app.

In the myapp directory, install draft-js and react-draft-wysiwyg by running,

npm install -S draft-js react-draft-wysiwyg or yarn add draft-js react-draft-wysiwyg

Add the editor component to our app.

Navigate to the src folder of the app, create a new folder named components and in that folder add a file called myEditor.js which will have the code for our reusable text editor.

• Add the following code and render the text editor in the App component. As a result, you will see a rich text editor on your page. Though it’s not yet that rich, isn’t it? so, let’s add some styles to the app so that everything is visible.

• In our App.js file, react already gives us some default code but we shall replace it with the code below. Note that we also import the react-draft-wysiwyg.css from node_modules so that we get all the styles for our editor.

• When we run yarn start in the terminal and it will open our React app at localhost:3000 however the styles still look off, so we need to add some styles to our components. In the file, App.css add the code below.

• Now that we can see our rich text editor, play around with it by typing in some words and styling them. There is one more important thing that we need to do, get that typed word from the editor, present it in our App.

Data conversion

• Let’s get fancier here, we are going to get our content from the text editor and present it in our preview modal. We use libraries like draft-js-to-Html and an element prop  dangerouslySetInnerHTMLwhich will interpret the Html and render it the way it is.
• Add a bootstrap button for preview in myEditor.js and a div to view the HTML as we type, it won’t do anything for now but it’s what we shall use to preview our results from the text editor.
• Remember to add the bootstrap CDN links and scripts to the index.html of the app in the public folder.

In index.html, add some code blocks.

Now that we have a button that does nothing let’s add a bootstrap modal in a new file inside the components folder called previewModal.js that it will pop.

Let’s ensure that we are on the same page as far as the folder structure is concerned.

myapp-|
      |__node_mudles/
      |__public/
          |__index.html
          |__favicon.ico
          |__logo192.png
          |__logo521.png
          |__robot.txt
      |__src/
          |__components/
               |__myEditor.js
               |__previewModal.js
          |__App.css
          |__App.js
          |__App.test.js
          |__index.css
          |__index.js
          |__serviceWorker.js
          |__setupTest.js
      |__.gitignore
      |__pacakge.json
      |__README.md
      |__yarn.lock

We then import our modal and render it in the editor component as follows.

When you click the previewMessage button, it should open a modal with nothing. Let’s give it what to present.

First, install draftjs-to-html dependency by running yarn add draftjs-to-html . Import it in myEditor file and use it to make conversions. Also, add convertToRaw from draft-js

Update the previewModal.js file by adding the output to our body and using the dangerouslySetInnerHTML prop. The updated file looks like the one below.

We are almost done, just a little bit of styling left, let’s add a few styles to our App.css and the test our app.

If everything is running well, take a deep breath and smile 😀, you have implemented a rich text editor, been able to get data from it and present it in the React App. If your app is not running you can start it by running yarn start in the terminal, ensure to be at the root of myapp

Find a finished application on Github

Reflection

• With the ability to add such a react-draft-wysiwyg rich text editor using draft-js in your React App, you will improve your User Interface as well as User experience.

Learning strategy

• While learning about rich text editors, the documentations were not enough to make my User Interface look like what I wanted.
• So I used my knowledge as a frontend engineer to customise the editor using my own styles. Lesson to learn is that not all can be got from the documentation, you need to be creative some times.

Conclusion and learning resources

• We have not exhausted all the power and usability of a rich text editor, you can read about more powerful functionalities in the link attached as well as the draft-js doc; https://jpuri.github.io/react-draft-wysiwyg/#/docs
• Find some details about creating a React app, look at https://blog.ldtalentwork.com/2019/11/29/how-to-serve-a-reactapp-with-a-flask-server/#respond

Hire the author: Hadijah K