Draftail 📝🍸

A configurable rich text editor built with Draft.js

npm Build Status

Draftail is a rich text editor built with Draft.js

Try it out by editing this text!

Features 📝🍸

Draftail aims for a mouse-free, keyboard-centric experience. Most formatting can be done by using common keyboard shortcuts, inspired by Google Docs. Here are important features worth highlighting:

  • Support for keyboard shortcuts.
  • Autolists – start a line with - , * , 1. to create a list item.
  • Undo / redo – until the end of times.
  • Common text types: headings, paragraphs, quotes, lists.
  • Common text styles: Bold, Italic, Underline, Monospace, Strikethrough
  • Built-in Link and Document controls.
  • Built-in Image and Embed blocks.

The Embeds in this example are powered by Embedly:

Try out some keyboard shortcuts:

  • <Put a list of common shortcuts here>

For developers 🚀

Draftail is meant to be used in scenarios where not all formatting should be available, and where custom formatting can be necessary. Available formats, built-in and custom, can be specificed declaratively for each editor instance.

Built-in

  • Block types: H1, H2, H3, H4, H5, H6, Blockquote, Code, UL, OL, P
  • Inline styles: Bold, Italic, Underline, Monospace, Strikethrough
  • Entities: Images, Embeds, (Links, Documents)
  • And HR, BR as special cases

Custom block types

New block types can be created by giving them a unique type, a label and an icon (for the toolbar), and element and className attributes:

{ label: 'Tiny', type: 'tiny-text', element: 'div', className: 'u-tinytext' },

Custom inline styles

TODO

Custom entity types

TODO