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.
Transcript
Intro
Hi, welcome to my session on Draft.js, .js, Slate.js, 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 options, discuss their strengths, and we'll have a look a bit at their data model.
[00:32] As you probably guess from the intro, the editors are Draft.js, .js and Slate.js. We chose these three because they're primarily well suited to React's component and prop model, as opposed to traditional wysiwyg editors like CK and TinyMCE, which are more focused on giving you 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 , or how many packages are using it and the number of GitHub stars?
[01:24] 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, et cetera, tables, links. You need to have both the link text and the URI.
Draft.js
[01:52] The first one we're going to look at is Draft.js. This is used Facebook Messenger, it's used in their comments, functionality, status posts, and the Facebook Notes App. 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. You do have to roll a lot of this yourself, but you get the things that you do want and not the things you don't. Looking at those criteria, it's funded and supported Facebook. It's 0.11.7, which is odd. You'd think there'd be a 1.0, given that it's being used in production. License is MIT, it's 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 I'll show you what that looks like in a minute. In terms of the ecosystem as 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 83,000 packages and has 20,000 stars.
Looking at the data model, it's made up of a series of blocks. We can see these blocks. Each has a key, and each of those has some text that goes in it and a type. Within these blocks, there can be a range of entities. 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.
[03:29] In terms of editor features, it supports block styles, inline styles, undo, redo, and paste. It 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 supports table... it doesn't support tables and it supports links.
editor.js
[03:52] The next editor is .js. .js powers a few organizations, 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: Semver. Data structure again JSON. There are a lot of plugins for this. Unlike Draft.js, where you have to write a lot yourself, mostly consists of adding extra plugins here. Has 1.5, 1500 packages using it and 15,000 stars.
The data structure here, as I said, everything is a block. A block has a type and then it has data, which is kind of the props inside that. This could be an example in terms of a list item. This would show you the items that were inside that list. 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 the full set is there and you just have to work out whether you're happy with the BETA.
Slate.js
[05:15] The next editor is Slate.js. This one was specifically built to address some of the pain points in the data structure of other editors and Draft.js is mentioned. It does support nesting and collaboration is the first-class citizen. So you can use this if you have a plan to build something like Google docs, where you have collaborative editing. It's not specifically React, but React first-class libraries are available for it and most of the docs use that.
In terms of its criteria, it's written ianstormtaylor. He's a GitHub user, so it's behind an individual rather than an organization but, as you'll see, it's quite widely used. The release is, again, still a zero, not a 1.0. The license is MIT. As with Draft.js, it's fairly bare metal in terms of features, so you have to put a lot of them together with custom code, but there are a lot of examples showing you how to do that. Release cycle is Semver. The data structure again is JSON. There's not a wide library of plugins for this, but there's a lot of example code that you can use to pretty much put everything that you need. It's being used 55,000 packages and has 20,000 stars.
[06:23] So the data structure here, it supports nested, as we saw. It is made up of nodes and each node is basically has a type and then it has children. The lowest level node is a text node, which just has text in it. At the bottom of every tree, there needs to be at least one text node. But, above that, the props are fairly arbitrary based on the type.
In terms of editor features, with Slate.js, you can do block styles, you can do inline styles, you can do undo/redo, paste, lists, nested blocks, media, tables, and links. But, like Draft.js, most of these require you to follow on with examples and write code yourself.
Summary
[07:02] In summary, which editor should you use? If you want stability of a large organization behind your project and a fairly wide adoption, go with Facebook's Draft.js, but don't expect things like nesting and things like collaborative editing are going to be hard.
If you want to get going fast and you want a rich set of features out of the box, use .js
But, if you want the ultimate control and you want nest and support, and you want to leave the door open for collaboration, use Slate.js, but just expect that you'll need to do a fair bit more work to get started. Thank you for coming to my session and look forward to the questions in Q
&
A.
React Summit 2022
