Draftail is an editor built with Draft.js

Try it out by editing this text!

Features 📝🍸

Draftail aims for a mouse-free experience. Most formatting can be done with keyboard shortcuts only, inspired by Google Docs and Markdown.


Here are important features worth highlighting:

  • Support for keyboard shortcuts. Lots of them!
  • Autolists – start a line with -, *, 1. to create a list item.
  • Shortcuts for heading levels ##, code blocks ```, and more.
  • Undo / redo – until the end of times.
  • Common text types: headings, paragraphs, quotes, lists.
  • Common text styles: Bold, Italic, and many more.
  • Built-in controls for links and documents.
  • Built-in image and embed blocks.

The embeds in this example are powered by Embedly:

Try out some of the shortcuts:

  • Apply H3 heading style: ### and Space.
  • Make a list item: - and Space.
  • Use traditional combinations if that's your thing: ctrl + shift + 8, or + + on Mac.
    • Increase list indentation: tab.
  • Insert or edit a link: ctrl + K or + .
  • Open a link or document: alt + enter or option + .

Using Draftail 🚀

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 formats

  • Block types: H1, H2, H3, H4, H5, H6, Blockquote, Code, UL, OL, P
  • Inline styles: Bold, Italic, Underline, Code, Strikethrough, Mark, Keyboard, Superscript, Subscript
  • Entities (things with data): Images, Embeds, Links, Documents
  • And HR, BR

Custom formats

Your mileage may vary! There is good support for custom block-level and inline formatting. Custom entities or decorators require knowledge of the Draft.js API, which is very low-level.

Be sure to check out the full documentation on GitHub for API details, and if you are having trouble please open an issue.

Getting started

Make sure to first install the editor, and check out required polyfills.

import React from 'react';
import ReactDOM from 'react-dom';
import DraftailEditor, { BLOCK_TYPE, INLINE_STYLE } from 'draftail';
const initial = JSON.parse(sessionStorage.getItem('draftail:content'));
const onSave = content => {
    console.log('saving', content);
    sessionStorage.setItem('draftail:content', JSON.stringify(content));
};

The above code imports required dependencies and saves / retrieves the content to sessionStorage.

Then, we declare the editor with its configuration:

const editor = (
    <DraftailEditor
        rawContentState={initial || null}
        onSave={onSave}
        blockTypes={[
            { type: BLOCK_TYPE.HEADER_THREE, label: 'H3' },
            { type: BLOCK_TYPE.UNORDERED_LIST_ITEM, label: 'UL' },
        ]}
        inlineStyles={[
            { type: INLINE_STYLE.BOLD, label: 'B' },
            { type: INLINE_STYLE.ITALIC, label: 'I' },
    />
);
ReactDOM.render(editor, document.querySelector('[data-mount]'));

This just scratches the surface, head to the project repository to check out all of the options.

Contributing

See anything you like in here? Anything missing? We welcome all support, whether on bug reports, feature requests, code, design, reviews, tests, documentation, and more. Have a look at our issue tracker and start the conversation.

If you want to learn more about how we are using this, check out:

Credits

Draftail is made possible by the work of Springload, a New Zealand digital agency, and core contributors to the Wagtail CMS. This beautiful demo site is the work of @thibaud_colas.