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.
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
- Inline Toolbar — Format text with an inline toolbar
- Side Toolbar — Toolbar positioned next to the focused line
- Anchor — Create and edit Links
- 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.
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
All other plugins only included fixes and additional features. Each Plugin has it’s own Changelog which you can find here:
- Mention Changelog
- Emoji Changelog
- Hashtag Changelog
- Linkify Changelog
- Undo Changelog
- Counter Changelog
- Sticker Changelog
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
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.
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.
Happy coding & don’t forget to check out https://www.draft-js-plugins.com