Draftail came about in 2016, as our team grew more and more frustrated with Wagtail’s rich text editor, and decided to build our own to eventually try and replace it.
A few years later, Draftail is now very capable for many use cases, and it comes with a nice little fantail logo.
The main goal of Draftail is to provide a bullet-proof content editing experience for basic rich text content. A modern take on WYSIWYG.
- All of the interactions with the editor should be doable with keyboard shortcuts.
- Power users should be able to use Markdown shortcuts in the editor to format content even faster.
- Copy-paste, drag and drop, should just work.
We also want Draftail to be heavily customisable, just like Draft.js is, but with sane defaults.
- Implementing basic formatting with strong guarantees should just be a matter of configuration – No need to reinvent your own Draft.js toolbar.
- More advanced extensions should be able to reach out for lower-level APIs, without compromising on consitency of the experience for end users.
- Experimenting with new capabilities to the editor shouldn’t require constant core changes – there should be plugin APIs.
As a project, it’s also fundamental that:
- The documentation is outstanding, providing examples of all Draftail capabilities, and general Draft.js editor capabilities
Work on the editor is tracked in GitHub issues, and prioritised with Milestones. Have a look if you’re wondering what we’re up to!
For the foreseeable future, high-level items on the roadmap are:
- Improvements to the editing experience with basic formatting.
- Better support for rich text features that are relatively advanced, like emojis and tables.
- Built-in, or pluggable, basic support for links and images without having to write code.
Under the hood, Draftail uses:
- Draft.js filters – Filter Draft.js content to preserve only the formatting you allow.
- Draft.js conductor – Little Draft.js helpers to make rich text editors “just work”
- markov_draftjs – Draft.js sample content generated with Markov chains of Project Gutenberg books.
It’s also developed with and alongside of other projects,
- Draft.js exporter – Library to convert rich text from Draft.js raw ContentState to HTML.
- Draft.js exporter, Markdown – Library to convert rich text from Draft.js raw ContentState to Markdown
- Draftail Playground – Try Draftail in a full-fledged preview environment
And of course, Wagtail still drives development of the editor significantly.