Rich Text Editor in React using Material UI

_👀 Medium like text editor in React

Introduction

I was facing issues with implementing a Text Editor in React, previously I had a hassle-free implementation in Vue for one of the projects I have on Github. Many things did not work for me. I tried packages like React Slate, React-draft-wysiwyg and more. But, they had dependency related issues. Many of them lacked concrete examples. This package called 'mui-rte' did work for me at last in this project bootstrapped with create-react-app.

This also has some warnings though which I might address in the future, but I needed a quick solution for the time being.

Requirements 🏃

• Node
• React
• Material UI
• Draft JS

Install 💥

npm install
npm start

The React app is configured to run by default on port 3000.

Features

• Text Editor
• Can have hyperlinks and images.
• Can parse HTML output from the editor to send to the back-end server.

Project Screenshots

Just one screenshot is there. No routes exist, editor is implemented on the main page only which looks something like this.

Deployment

Docker deployment using Nginx to be added in the future.

Development

Easily set up a local development environment!

• clone
• npm install
• npm start

Start coding! 🎉

Clone this repo on your machine, navigate to its location in the terminal and run:

Contributing

All contributions are welcome!