TaskList extension
This extension enables you to use task lists in the editor. They are rendered as <ul data-type="taskList">
. This implementation doesn’t require any framework, it’s using Vanilla JavaScript only.
Type [ ]
or [x]
at the beginning of a new line and it will magically transform to a task list.
Install
npm install @tiptap/extension-task-list @tiptap/extension-task-item
This extension requires the TaskItem
extension.
Settings
HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
TaskList.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
itemTypeName
Specify the list item name.
Default: 'taskItem'
TaskList.configure({
itemTypeName: 'taskItem',
})
Commands
toggleTaskList()
Toggle a task list.
editor.commands.toggleTaskList()
Keyboard shortcuts
Command | Windows/Linux | macOS |
---|---|---|
toggleTaskList() | Control + Shift + 9 | Cmd + Shift + 9 |