Draft.js And Why You Should Contribute

Honestly it’s such a pleasure to write blogs on Medium, I absolutely ❤ it. One of the biggest reasons is how elegant it’s rich text editor is — it looks so simple yet it’s so powerful. I think if you are using a classic Wordpress editor(which is fine btw), you’ll find Medium’s editor very refreshing and more powerful in many cases (like instant embed of any url, Tweets, Videos, Gifs etc).

Some of the other products I ❤ are Twitter and Slack (I’m sure you do too). You can do a lot of things in those little tweet/chat fields. You can add @mentions, #hashtags, memes, emojis, embed links and more.

Why Draft.js

Now if you think about any modern web app that you love, it probably has a powerful RichText editor somewhere. And because of their popularity, YOUR customers have come to expect that YOUR app also has all those features and is very elegant.

Real Cost Of RichText Editors

If you want to build an editor that’s as elegant and feature rich as Medium’s or Twitter’s, it’ll probably take several months or may be years to “perfect” it because browser’s “ContentEditable” is very hard to work with and there are just tons of effort to make it all work. For most companies, its not affordable so they just use some off the shelf editors and move on.

See: Medium Engineer’s: Why ContentEditable Is Terrible

Enter Draft.js

Facebook wanted to build a RichText editor for their various products like Facebook Comments, Facebook Notes blogging app, Facebook Messenger and other places. So they built one and apparently are using it in many of those apps in production already.

They built the Editor in such a way that it has two parts:

The Engine (Draft.js) — A ReactJS layer on top of (ContentEditable) that resolves all the issues and provides additional features to build UI on top of it.
The UI — Presentation Layer because the UI features of Editor inside Facebook Messenger are different from that of Facebook Notes.

And thanks to Facebook, they recently open sourced the “engine” and called it Draft.js.

In it’s simplest form, it looks very similar to a typical Input field or TextArea but has tons of features.

<Editor editorState={this.state.editorState} onChange={this.onChange} placeholder=”Enter some text…” ref=”editor” />

Why Should You Contribute

If you are building a ReactJS app, in many cases, you’ll end up needing an awesome Rich Text Editor. Given how difficult and expensive it is to build one for every single company, wouldn’t it be cheaper and also feel good just contribute to one that’s already this far along, open source, in production, backed by a multi-billion dollar company?

I think you’d agree that the answer is a resounding YES.

Where Should You Contribute

As I mentioned earlier, there’s “the Engine”, the Draft.js itself and then there is “the UI”. I think while there is need to contribute for both, “the UI” part is actually more in need of contribution.

1. The Engine — Draft.js

facebook/draft-js
draft-js - A React framework for building text editors.github.com

2.1 The UI — draft-js-plugins

There are lots of efforts by various companies. The one that caught my eyes in particular was “draft-js-plugins”. It was created during Stripe’s Open Source Retreat by Nik Graf and folks at Squads). They have built a plugin architecture on top of draft.js to make it easy to build various UIs and features like memes, gifs, linkify, stickers etc.

draft-js-plugins - High quality plugins for DraftJS with great UX
Facebook's rich-text editor framework DraftJS built on top of React allows you to create powerful editors. We built a…www.draft-js-plugins.com