Draft.js, Editor.js, Slate.js: Choosing the Best Text Editor for Your React Project

Rate this content
Bookmark

If your React project requires rich text editing functionality, there are a number of libraries to consider. In this session we'll look at the features of some of the key players so that you can help judge which is the best fit for your requirements.

This talk has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.

FAQ

Draft.js supports block styles, inline styles, undo and redo, paste support, and lists. It also supports nested lists to a depth of five, media like images and YouTube, and links, but it does not support tables.

Draft.js is funded and supported by Facebook, and its release cycle follows semantic versioning. The current version mentioned is 0.11.7.

Editor.js offers a block-based data model where everything is a block with a type and data. It supports tables via a beta plugin and has a rich set of features that can be extended through additional plugins. The supporting company behind Editor.js is Codex.

Slate.js was designed with collaboration as a first-class feature, making it ideal for projects like Google Docs where collaborative editing is crucial. It allows for nested structures and extensive customization.

Draft.js and Slate.js are both released under the MIT license, offering broad permissions with limited restrictions. Editor.js is licensed under the Apache 2.0 license, which also provides liberal terms with some requirements to mention modifications.

The choice depends on your project needs: Draft.js is backed by Facebook and is suitable for basic functionalities with custom coding. Editor.js offers rich features out-of-the-box and is quick to set up. Slate.js allows for ultimate control and customization, ideal for complex requirements including nesting and collaboration.

Draft.js uses a JSON structure with blocks that contain keys, types, and text. Editor.js also uses a JSON format where everything is treated as a block. Slate.js's structure involves nodes and children, with the lowest level being a text node, supporting more complex nested structures.

Lee Rowlands
Lee Rowlands
8 min
14 May, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Welcome to my session on DraftJS, EditJS, and SlideJS. We will discuss their strengths and data model, focusing on React's component and prop model. We will evaluate the editors based on their sustainability, funding, support, maturity, license, editor features, release cycle, data structure, ecosystem, browser support, usage, and GitHub stars. The first editor we'll discuss is Draft.js, which is used by Facebook Messenger, comments, status posts, and the Facebook Notes app. It's funded and supported by Facebook, has a version of 0.11.7, and requires custom code for additional features. The license is MIT. It's a bare metal, in terms of features. The release cycle is semantic version. The data structure is JSON. It's used by 83,000 packages and has 20,000 stars. The data model is made up of blocks with text and entities. It supports various editor features including block styles, inline styles, undo/redo, paste, lists, nested lists, media, and links. Editor.js is a block-based editor written in vanilla JavaScript. It has a 2.19 release, Apache 2.0 license, and a semver release cycle. The data structure is JSON, and there are numerous plugins available. It has 1,500 packages using it and 15,000 stars. The editor features include block styles, inline styles, undo/redo, paste, lists, nested blocks, media, and links.

1. Introduction to DraftJS, EditJS, and SlideJS

Short description:

Welcome to my session on DraftJS, EditJS, and SlideJS. We will discuss their strengths and data model, focusing on React's component and prop model.

Hi, welcome to my session on DraftJS, EditJS, and SlideJS. Choosing the best text editor for your React project.

Just a quick overview, this is a lightning talk, so I'm going to introduce you to three discussions, discuss their strengths, and we'll have a look at their data model.

So as you probably guessed from the intro, the editors are DraftJS, EditJS, and SlideJS. We chose these three because they're primarily well suited to React's component and prop model, as opposed to traditional WYSIWYG editors like CKEditor and TinyMCE, which are more focused on giving your HTML as your output.

2. Evaluation Criteria and Draft.js Overview

Short description:

We will evaluate the editors based on their sustainability, funding, support, maturity, license, editor features, release cycle, data structure, ecosystem, browser support, usage, and GitHub stars. The editor features we'll look at include block styles, inline styles, undo/redo support, paste support, lists, nested blocks, media, tables, and links. The first editor we'll discuss is Draft.js, which is used by Facebook Messenger, comments, status posts, and the Facebook Notes app. It's funded and supported by Facebook, has a version of 0.11.7, and requires custom code for additional features.

The criteria we're going to evaluate these editors against is their sustainability. So who's funding them, who's supporting them. Maturity. The license. The editor features. The release cycle. Their data structure, so what the data looks like when it comes out. The ecosystem, are there plugins, are there other things you can do to extend the functionality. Browser support. Who it's used by or how many packages are using it, and the number of GitHub stars.

So the editor features that we're going to look at are whether you can do block styles, so H1, H2, block quote. Inline styles like bold and italic. Undo and redo support. Paste support. Whether it supports lists. Nested blocks. Media, such as images, YouTube etc. Tables. Links. So you need to have both the link text and the URI.

So the first we're going to look at is Draft.js. This is used by Facebook Messenger. It's used in their comments, functionality, status posts and the Facebook Notes app. So it's being used in production on a fairly large scale. It has a lot of features but that will require custom code. This isn't CK editor, you do have to roll all this yourself. But you get the things you do want and not the things you don't. So looking at those criteria. It's funded and supported by Facebook. It's a 0.11.7, which is odd, you think it would be a 1.0, given that it's being used in production.