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:
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.
const autoListPlugin =
This can then be passed into a
// Within another React component<Editor plugins=autoListPlugin/>
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
Even though it would seem like a list should be created here (because the final visible sequence is
*), we don’t attempt to.
- Allow the various list regexes to be overridden.
- Add test coverage for, you know, the actual functionality within a Draft.js instance.