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
prosemirror-todo-item
prosemirror-todo-item is a ProseMirror plugin that provides similar functionality to @tiptap/extension-task-item. It allows you to create and manage to-do items within a ProseMirror editor. While it offers similar features, it is designed specifically for ProseMirror and may require more setup compared to Tiptap's extension.
slate-todo-list
slate-todo-list is a plugin for the Slate editor that adds support for to-do lists. It provides similar functionality to @tiptap/extension-task-item, allowing you to create and manage task items within a Slate editor. The main difference is that it is tailored for use with the Slate editor, which has a different architecture and API compared to Tiptap.
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.