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

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.

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.

The license is MIT. It's a bare metal, in terms of features. So most of the functionality you're going to have to build yourself, but there's good examples.

The release cycle is semantic version. The data structure is JSON and we'll show you what that looks like in a minute. In terms of the ecosystem, there's a full editor available if you install some extension projects. Browser support, it doesn't support IE 11 and there are some issues with mobile browsers such as iOS, Safari and Chrome Android. It's used by 83,000 packages and has 20,000 stars.

Looking at the data model, it's made up of a series of blocks and so we can see these blocks each have a key and each of those has some text that goes in it and a type. And then within these blocks there can be a range of entities. So this is for things like images or mentions or links. Each one of these has a type, they have immutability which is outside the scope of this talk and they can have data for your props. In terms of editor features it supports block styles, inline styles, undo, redo and paste. Supports lists, it supports nested lists only so no other blocks can be nested, just lists and that's only to a depth of five. It supports media, it doesn't support tables and it supports links.

The next editor is Editor.js. Editor.js powers a few organisations, mostly in Eastern Europe. It's written in vanilla JavaScript but there are React bridges. The supporting company behind this is Codex, it seems to be an agency of their own. It has a 2.19 release. The license is Apache 2.0. It's a block-based editor in terms of features so everything is considered to be a block. Release cycle is semver. Data structure, again JSON. There are a lot of plugins for this so unlike Draft.js where you have to write a lot yourself. Mostly it consists of adding extra plugins here. It has 1.5, 1,500 packages using it and 15,000 stars. So the data structure here, as I said, everything is a block. So a block has a type and then it has data which is kind of the prompts inside that. This could be, for example, in terms of a list item. This would show you the items that were inside that list. So in terms of content editor features, you get block styles, inline styles, undo redo, paste, lists, nested blocks, media. Tables is available but it's via a beta plugin and links. So before sets there and you just have to work out whether you're happy with the beta.