@tiptap/extension-task-item

Creating Task Items

This code demonstrates how to import and use the TaskItem extension in a Tiptap editor instance. By including TaskItem in the extensions array, you enable the creation of task items within the editor.

import TaskItem from '@tiptap/extension-task-item';

const editor = new Editor({
  extensions: [
    TaskItem,
  ],
});

Customizing Task Items

This code shows how to configure the TaskItem extension to allow nested task items. The `nested` option is set to true, enabling the creation of sub-tasks within a task list.

import TaskItem from '@tiptap/extension-task-item';

const editor = new Editor({
  extensions: [
    TaskItem.configure({
      nested: true,
    }),
  ],
});

Handling Task Item State

This code demonstrates how to handle the state of task items within the editor. By listening to the 'update' event, you can get the current state of the editor content in JSON format, which includes the state of the task items (checked or unchecked).

import TaskItem from '@tiptap/extension-task-item';

const editor = new Editor({
  extensions: [
    TaskItem,
  ],
});

editor.on('update', ({ editor }) => {
  const json = editor.getJSON();
  console.log(json);
});