Rich Editor

A rich text editor built using React and Slate as part of the internship assignment for Plotline. The app includes a toolbar with several editing options. An additional functionality apart from the rest of the edit options is the ability to highlight text and display them as tags. The problem statement file can be found here

Getting Started

• Fork this repo and run the git clone <forked repo> command from your terminal/bash.
• Run npm install
• Run npm start to get started on localhost

Demo

The app has been hosted on Netlify here.

Info

• The rich editor is built using React.js, Slate.js and Materialize CSS
• The highlighted tags show up in the container beside the main editor component
• The editor supports hot keys for bold, italic, underline and code.
• The last option in the toolbar is used for highlighting text
• There are 30 colors assigned randomly for the different lines of text
• The user authentication and authorisation has been implemented in two ways:

Potential Improvements

• Adding a hovering toolbar for easy access to frequently used tools
• Responsive design
• More hot key support
• More color options for text highlight to avoid issues when huge documents are edited

Any more suggestions are always welcome in the PRs!

Tools Used

• React.js: A JavaScript library for building user interfaces.
• Slate.js: A completely customizable framework for building rich text editors.
• Materialize CSS: A modern responsive front-end framework based on Material Design