TaskItem extension

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.

Install

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. If this function returns false, the check state will be preserved (readOnly).

TaskItem.configure({
  onReadOnlyChecked: (node, checked) => {
    // do something
  },
})

Keyboard shortcuts

Source code

packages/extension-task-item/