Draft.js Auto-list Plugin

This is a plugin for the draft-js-plugins-editor, a plugin system that sits on top of Draft.js.

This plugin adds support for automatic unordered/ordered list creation within Facebook’s Draft.js editor based on the input text. It looks something like:

Auto-list creation in action

In short, the plugin will turn a sequence of Markdown-like lists into their actual HTML representation:

* will become an unordered list
- will become an unordered list
1. will become an ordered list
2. will become an ordered list
123. will become an ordered list

You’ll notice that the plugin also enables support for breaking out of lists like you’d expect in a WYSIWYG editor. That is, if you press "Return" on an empty list item, the current block is turned back into a standard block type.

Usage

import createAutoListPlugin from 'draft-js-autolist-plugin'
const autoListPlugin = createAutoListPlugin()

This can then be passed into a draft-js-plugins-editor component:

import Editor from 'draft-js-plugins-editor'
// Within another React component
<Editor plugins={[autoListPlugin]}/>

Caveats

To ensure that we aren’t constantly querying the content of the editor, the plugin keeps track of the characters that are typed in order and only attempts to create a list if the full sequence matches the examples above. If make a mistake while typing a list it won’t create one. For example, the following sequence would fail (typed characters delineated by []:

[*][m][backspace][space]

Even though it would seem like a list should be created here (because the final visible sequence is *), we don’t attempt to.

TODO

<input disabled="" type="checkbox"> Allow the various list regexes to be overridden.
<input disabled="" type="checkbox"> Add test coverage for, you know, the actual functionality within a Draft.js instance.

Package detail