@tiptap/extension-task-item

What is @tiptap/extension-task-item?

@tiptap/extension-task-item is an extension for the Tiptap editor that allows you to create and manage task items (checkboxes) within your rich text editor. It provides a way to add interactive checkboxes to your content, making it useful for creating to-do lists, task management applications, and other similar functionalities.

What are @tiptap/extension-task-item's main functionalities?

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);
});

Other packages similar to @tiptap/extension-task-item

draft-js-checkable-list-item

draft-js-checkable-list-item is a plugin for Draft.js that adds checkable list items to the editor. It offers similar functionality to @tiptap/extension-task-item, enabling the creation of interactive checkboxes within a Draft.js editor. This package is specifically designed for Draft.js and may require different integration steps compared to Tiptap.

README

@tiptap/extension-task-item

Introduction

tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.

Official Documentation

Documentation can be found on the tiptap website.

License

tiptap is open sourced software licensed under the MIT license.