The server-side rendering (SSR) capability of Next.js adds complexity when incorporating certain client-side dependencies in your applications.

In this tutorial, we will build a simple Rich-text editor with Next.js and an NPM dependency called Draft.js. There is scanty information on the topic and it took me a while and a lot of headaches to figure this out on my own.

At the end of this tutorial, give or take, you should set this up in your Next.js application within 4 minutes.

Next.js

Draft.js and its supporting dependencies

Check out the official documentation to set up Next.js if you haven't already.

Install these packages

Draft.js & React-draft-WYSIWYG: A React framework for building text editors

draft-js-export-HTML & draft-js-import-HTML: Packages for serializing content

We define a functional component called MyEditor. Within this component, we use the useState hook to create a state variable named editorState and its corresponding setter function, setEditorState. By default, editorState is set to an empty state created with EditorState.createEmpty(). The handleChange function updates the state with the new editor state whenever changes occur.

In the return statement, we render the Editor component provided by the react-draft-wysiwyg package. We pass in the editorState as a prop to display the current content of the editor. Additionally, we provide the onEditorStateChange prop to handle changes made by the user and update the state accordingly.

We are done configuring the editor. We can now use our editor and track every state change.

Now, we can pass the htmlVersion as a body to any POST and PATCH request we may need.

One significant error with this configuration is that the cursor loses focus unnecessarily and frequently. Let's do a quick fix now. We will move the cursor to the end of the text before updating the editor state.

Throughout the article, we covered the installation and setup of the necessary dependencies, demonstrated how to dynamically load the React-Draft-Wysiwyg component, and showcased the implementation of a basic editor with state management. Additionally, we discussed how to handle content changes and provided an outline for serialization.

Kindly leave a comment if have any queries and I will attend to them. Thank you!

For technical writing and partnerships, send me a mail

Read articles from Michael Asiedu. directly inside your inbox. Subscribe to the newsletter, and don't miss out.

My name is Michael. I'm a software developer who enjoys blogging and interacting with others about technology.

My work has been included in a variety of publications, including books and periodicals, and I've contributed to a number of open-source projects.

Prior to designing software, I worked in digital marketing. I envision myself working in the blockchain business for the foreseeable future.