R&D of a rich text editor in FE:

Objective: To find the rich react text editor to integrate with the workflow management system
FE. Text editors should support encryption and decryption of data at the time of getting and
setting. We should be able to customize it as much as we want according to our needs.

Procedure/Findings:

1. Draft.js

Draft.js is an open-source project by Facebook, built for React. This is a robust, extensible, and

customizable framework, and it's very popular among.

● Pros

○ Highly extensible and customizable with plugins built on top of Draft.js.

○ Flat content model is simple to understand.

○ Many tutorials and support available due to the large, growing open-source

developer community backed by Facebook since 2016.

● Cons

○ When there is a need for complex content structures like tables, the editor

becomes slow, and the code gets complex.

○ OSX custom key-binding issues.

○ No official mobile support.

DraftJS is under maintenance mode and archived in Dec 2022. Facebook is replacing it with
“Lexica”.

2. Slate.js

Slate.js is another exciting Rich Text Editor for React inspired by Draft.js. And you can use it to

build beautiful editors like Medium Editor, Dropbox Paper, or Google Docs.

● Pros
 ○ Produces JSON output making it easier to integrate with other modules.

○ Its’ nested document model supports much more complex content structures like

Tables, Page Breaks, and other custom features.

○ Extensible with the use of plugins.

○ Well descriptive documentation and interactive demos available.

○ Trusted by Salesforce and Airtable.

● Cons

○ Still in Beta(as of May 2021), which might be a bummer to trust and implement

on production sites.

○ Need a bit more initial UI setup to accommodate editor controls.

3. Quill.js

Third on the list is Quill.js, Rich Text Editor with cross-platform and cross-browser support.

Hence, this is the perfect choice to look for smooth functionality on all modern browsers in

desktops, tablets, and mobile phones.

● Pros

○ No need for parsing HTML or different DOM trees like in other text editors, thanks

to its API-driven design.

○ Custom content and formatting support with presets for editor styling.

○ Cross-platform and browser support.

○ Easy to set up.

● Cons

○ Possible XSS security vulnerabilities.

○ Feature customization is limited.

 ○ Fewer updates and patches.

Conclusion: Suggested editor to use according to my findings: React-Quill (most popular one
with maximum downloads in last 1 year — draft-js vs lexical vs medium-editor vs quill vs slate vs
tip tap (link))

Best free React editor: Quill (Link: sandbox , codepen)

Api Documentation:(Link:api)
To add email sent (demo Link: codepen)
npm link

References:

1. TinyMCE (paid)( Link: link , Sandbox )

2. Froala (paid) (Link: link, sandbox)
3. Comparison of Text editor (Link: React editor)
4. Link: Best Rich Text Editor Components (WYSIWYG) for ReactJS, React Editor