Announcing DraftJS Plugins 2.0

About 1.5 years ago we released DraftJS Plugins 1.0. It provides an architecture to combine various rich text editing features based on your needs with only a handful lines of code. Today we are happy to announce the 2.0 release adding toolbar plugins and supporting a delightful experience to manage and enhance Atomic Blocks like Images. 🎊 🎈🎉

2.0 ships with 9 new plugins and to get a better overview we categorised them into four different groups: Content Plugins, Atomic Block Plugins, Toolbar Plugins and Decorator Plugins.

We tried to make the toolbars simple and user-friendly. For example once you instantiate the inlineToolbarPlugin you can get the InlineToolbar component to be rendered in the React component tree.

To achieve composability for Atomic Blocks with plugins the initial setup is slightly more complex. First you need to create all of the plugins. Get out the decorator from each of them and compose them using the editor’s composeDecorators compose function. The combined decorator then can be passed to the image plugin during creation. All plugins still have to be provided to the plugins list. Similar to the Inline and Side toolbar the Alignment component has to be extracted and rendered.

In version one of the architecture it was possible to decorate each block using a decorators array returned from the blockRendererFn. None of the plugins we provided ever used that feature nor am I aware of a community plugin. Therefore for most people upgrading the core should be as simple as running

All other plugins only included fixes and additional features. Each Plugin has it’s own Changelog which you can find here:

What I’m especially excited about, is that over the last 1.5 years we saw 18 plugins open sourced by community members. 👏🎈🎉

With 112 contributors of course many more were involved to make this release happen. Here are a couple of honourable mentions who made some significant contributions: bkniffler, bashkos, mzbac, amannn, mxstbr, StevenIseki, max-winderbaum, Zhouzi

The Mentions plugin is by far the most popular plugin. While not originally planned it was heavily used for many autocompletion use-cases. Over the last year we have learned a lot about the requirements and limitations of the current API and therefore we plan to work on an Autocomplete plugin incorporating all these lessons learned.

There is an open Pull Request for a Drag’n’Drop upload plugin. We didn’t get this plugin ready for 2.0, but looking forward to release it after the work there has been finished.

While this is only blocked by a handful of dependencies we want to help out to make all core plugins available to React 16 users as soon as possible.

Version two took us quite some time. Nowadays I believe this was a mistake and we should have done a lot more smaller releases. Julian has some great API improvements in mind. Expect 3.0 to come rather sooner than later.

Related posts:

Libdot is a new technology company rethinking the way librarians live and work. Our manifesto makes the case for our existence, and describes a world in which our impact is felt.

Onboard data or Ingest… Store and Organise it…. Extract Insights or Reporting which all equal value creation….Not to mention all this Data Science and Artificial Intelligence stuff?….Easy right…

Carpooling or ride-sharing has become a household name among the office goers. You may have seen a few advertisements and posters while travelling here and there. If you are one of those rare human…