Passionate about Software Architecture, UX, Skiing & Triathlons — Co-Creator of DraftJS Plugins and having a blast at http://www.serverless.com

Nov 10

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. 🎊 🎈🎉

DraftJS Plugins 2.0 Example on the Website (Source Code)

Website: https://www.draft-js-plugins.com
Repository: https://github.com/draft-js-plugins/draft-js-plugins

New Plugins

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.

Atomic Block Plugins

Alignment — Align Atomic Blocks using an Inline Toolbar e.g. left, center

Drag’n’Drop — Drag and drop Atomic Blocks anywhere in the Editor

Resizeable — Resize Atomic Blocks

Focus — Making Atomic Blocks like Images focusable and a dependency for most Atomic Block Plugins

Toolbar Plugins

Inline Toolbar — Format text with an inline toolbar

Side Toolbar — Toolbar positioned next to the focused line

Decorator Plugins

Anchor — Create and edit Links

Content Plugins

Image — Inlining Images within an Editor using Atomic Blocks
Video — Inlining Videos within an Editor using Atomic Blocks

How it works

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.

Upgrading

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

npm install draft-js-plugins-editor --save

The only two plugins containing breaking changes are the the Mention and Emoji plugin. In the Emoji plugin we removed a wrapping span whenever an Emoji is rendered. In the Mention we switched from Immutable.js Maps for the mention entries to plain old JavaScript Objects. The initial implementation causes a lot of confusion due the fact, that Draft.js’ convertFromRaw function created plain JavaScript Objects.

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

Community & Team

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

I want to point out that this release was only possible due to the hard work of Julian Krispel. He was part of the initial team creating the plugin system and since a few months he started to take over development and maintenance leadership of the project. He is a freelancer and almost exclusively works on creating quality rich text editing experiences. If you looking for help in that space I recommend you to hire him. Find out more at https://reactrocket.com

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

What’s next

Autocomplete Plugin

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.

Drag’n’drop upload plugin

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.

Support for React 16

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.

Release Shedule

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.

Feel free to jump into the Github issues or reach out to us on the #draft-js-plugins channel in the Draft.js Slack if you want to help. 🙌

Happy coding & don’t forget to check out https://www.draft-js-plugins.com