Awesome

Task list for quill

Adds a task / todo list to the quill editor. Behaves as the built-in bullet list. Includes a toolbar item.

The list items are clickable. A click on an item toggles the item as checked.

Toolbar icon and task list

Quill doesn't have a built-in checkbox list (yet). There's an implementation on the develop branch, but there's no released version yet containing it. If you're using the edge version (i.e. develop branch) you can already use it.

This is a pretty lazy plugin that adds support for that. It's not a very sophisticated solution but works sufficiently well for now.

Install

npm i quill-task-list

yarn add quill-task-list

Usage

Require or import the JavaScript and the SASS file in your interwebs page, after the main quill.js.
Configure the module when instantiating quill

this.editor = new Quill('#editor', {
  modules: {
    'toolbar': [ 'task-list' ],
    'task-list': true
  }
});

You can see the plugin in action in Mykonote.

TODO

For now the click triggers a dummy update, because the css class toggle doesn't trigger a change in quill. The proper way would be to change the state of the item by using a delta directly and maybe two kinds of list item classes (a normal TaskListItem and a CheckedTasklistItem or something. Fixing this would also fix the history. This may be easy for someone familiar with the internals of quill.

License

BSD 3-clause (the same one that Quill uses)