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.
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.
Available in Español
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.
3. Draft.js Features and Data Model
Short description:
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.
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.
4. Editor.js Overview
Short description:
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.
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.
