Thibaud’s blog

Notes, thoughts, and open-source software

Draftail v1.3.0: community improvements, beyond Wagtail

Time for a new release! Draftail v1.3.0 is out, and this is the first release to solely focus on improvements or fixes requested by users of Draftail outside of Wagtail, its first large-scale implementation.

Bug fixes and new features

readOnly editor support

The editor now supports being set to readOnly mode, just like vanilla Draft.js. Thanks to @SpearThruster for requesting this, and making the pull request to implement this new prop for the editor 🎉.

Controlled editor

Another commonly requested feature was for using the editor as a controlled component – the recommended mode of operation for form elements in React, and again how vanilla Draft.js works.

This is now implemented with two props: editorState and onChange. People familiar with vanilla Draft.js will feel right at home. This will also make it much easier to integrate the editor in apps where state is centrally managed, or where forms have specific reset / validation behavior.

To help with Draft.js state initialisation and persistence, Draftail now also exposes APIs to help with data conversion, which are built-in with the uncontrolled editor API.

Customisable undo/redo button icons

Thanks to @rmakovyak for fixing this – icons should be customisable in the toolbar for all buttons, but there was a bug preventing this for undo/redo buttons via the showUndoControl and showRedoControl props.

State of Draftail

Put simply, none of the above changes are going to be useful for Draftail’s first use case: as an editor for Wagtail. I find this wonderful: this reflects that the editor is beneficial for people outside of the Wagtail bubble, and, with those changes, it will become useful for even more use cases that I didn’t initially identify.

According to GitHub and npm statistics, the editor is used in 118 public repositories and gets downloaded 1’772 times per week on npm. There are well known names in there – the FEC in the US for their CMS, NATO’s Communication and Information Agency, Sciences Po’s médialab. Saleor, an up-and-coming e-commerce platform built on modern technologies also announced on their blog that the upcoming version of Saleor would be using Draftail for rich text content.

Screenshot of Draftail as it is used in Saleor 2.0, for a product description field

Draftail looking good in Saleor dashboard 2.0!

I’m sure there are many more. If you’re using Draftail, please do get in touch so others can see all of the cool things you’re doing with it!

Up next

With those improvements in place to make Draftail usable in more scenarios, I’d really like to go back to focusing on features again. Here are things that look really cool that I’d like to look at next: