Make option a callback, update docs

This commit is contained in:
Kasper Nilsson
2022-02-10 16:58:26 -08:00
committed by Dominik
parent eda8d801b5
commit 2875fbe1c9
3 changed files with 57 additions and 35 deletions

View File

@@ -4,6 +4,7 @@ icon: task-line
---
# TaskItem
[![Version](https://img.shields.io/npm/v/@tiptap/extension-task-item.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-task-item)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-task-item.svg)](https://npmcharts.com/compare/@tiptap/extension-task-item?minimal=true)
@@ -12,6 +13,7 @@ This extension renders a task item list element, which is a `<li>` tag with a `d
This extension doesnt require any JavaScript framework, its based on Vanilla JavaScript.
## Installation
```bash
npm install @tiptap/extension-task-list @tiptap/extension-task-item
```
@@ -21,6 +23,7 @@ This extension requires the [`TaskList`](/api/nodes/task-list) node.
## Settings
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
```js
@@ -31,7 +34,32 @@ TaskItem.configure({
})
```
### nested
Whether the task items are allowed to be nested within each other.
```js
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`.
```js
TaskItem.configure({
onReadOnlyChecked: (node, checked) => {
// do something
},
})
```
## Keyboard shortcuts
| Command | Windows/Linux | macOS |
| --------------- | ------------------ | ------------------ |
| splitListItem() | `Enter` | `Enter` |
@@ -39,7 +67,9 @@ TaskItem.configure({
| liftListItem() | `Shift`&nbsp;`Tab` | `Shift`&nbsp;`Tab` |
## Source code
[packages/extension-task-item/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-item/)
## Usage
https://embed.tiptap.dev/preview/Nodes/TaskItem