2.0 KiB
2.0 KiB
description, icon
| description | icon |
|---|---|
| The actually task, without it the task list would be nothing. | task-line |
TaskItem
This extension renders a task item list element, which is a <li> tag with a data-type attribute set to taskItem. It also renders a checkbox inside the list element, which updates a checked attribute.
This extension doesn’t require any JavaScript framework, it’s based on Vanilla JavaScript.
Installation
npm install @tiptap/extension-task-list @tiptap/extension-task-item
This extension requires the TaskList node.
Settings
HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
TaskItem.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
nested
Whether the task items are allowed to be nested within each other.
TaskItem.configure({
nested: true,
})
onReadOnlyChecked
A handler for when the task item is checked or unchecked while the editor is set to readOnly.
If this is not supplied, the task items are immutable while the editor is readOnly.
TaskItem.configure({
onReadOnlyChecked: (node, checked) => {
// do something
},
})
Keyboard shortcuts
| Command | Windows/Linux | macOS |
|---|---|---|
| splitListItem() | Enter |
Enter |
| sinkListItem() | Tab |
Tab |
| liftListItem() | Shift Tab |
Shift Tab |