TaskItem

Version Downloads

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.

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

Source code

packages/extension-task-item/

Usage