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.