Add a rich text editor to your app: react-draft-wysiwyg

Introduction

The npm library react-draft-wysiwyg is one of the popular ready to use rich text editor framework built on top of react and draft-js which is in turn a framework for building rich text editors that leverages the power of immutable collections in javascript.

Rich text and plain text

Rich Text Format (RTF) is a file format that allows the exchange of text files between different editors. ... Plain Text: Plain text contains no formatting, only line breaks and spacing. Therefore no text formatting (such as font sizes and colors, bolding or italics) can be used.

Use case

A rich text editor has many use cases, some of them being creating website wide announcements, illustrative and emphasized description of products.

Installation

Execute npm install draft-js he react-draft-wysiwyg

Note that he is an html encoder/decoder.It will be used to decode text coming from the backend and covert to object.

An example

The best way to get acquainted with a concept is by an example , so let's follow this approach.
The following example will demonstrate step by step process to show, edit and save text in the text editor.

The message coming form backend will be in the form of an unescaped html string eg:

{
   "text": "{"blocks":[{"key":"13trq","text":"Important message!","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}}"
}

Note that in the above sample response the text that will be shown is "Important message!"

Lets decode this html string using he and set the editor state using below sample function

import { Editor } from 'react-draft-wysiwyg'
import { EditorState, convertFromRaw, convertToRaw } from 'draft-js'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import he from 'he'

//some_code


function setUpEditor(){

const serverResposne = {
   "text": "{"blocks":[{"key":"13trq","text":"Important message!","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}}"
}

const message = JSON.parse(he.decode(serverResposne.text))
      if (message.blocks[0].text === '') {
       //this condition indicates empty message
      } else {
        const contentState = convertFromRaw(message)
        const editorState = 
                  EditorState.createWithContent(contentState)
        setEditorState(editorState) //setting the message state in editor
      }

Note that editorState is the top level object for the editor and has the following information:

1)The current text content state
2)The current selection state
3)The fully decorated representation of the contents
4)Undo/redo stacks
5)The most recent type of change made to the contents

More information on editorState: Link

As you start typing the editorState will get updated accordingly

Action Buttons

You can add some action buttons beneath the editor , such as
save, clear

Clear

This will clear out the text in the editor on button click.Here is how the onClick handler will look like:

const onClear = () => {
    setEditorState(EditorState.createEmpty())
  }

Save

Convert the state to unescaped html string and call the save method responsible for triggering rest call.

const onSave = async () => {
    const newMessage = {
message:
JSON.stringify(convertToRaw(editorState.getCurrentContent()))
      }

//api call here with newMessage as request body
}

Note that we can check if the editor state has empty message by editorState.getCurrentContent().hasText()

Refer Example file for sample implementation.