You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
This can then be passed into a draft-js-plugins-editor component:
importEditorfrom'draft-js-plugins-editor'// Within another React component<Editorplugins={[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
Allow the various list regexes to be overridden.
Add test coverage for, you know, the actual functionality within a Draft.js instance.
About
Automatic unordered/ordered list creation for Facebook’s Draft.js editor.