2020-08-19 03:39:41 +08:00
|
|
|
|
# ListItem
|
2020-09-23 18:33:45 +08:00
|
|
|
|
The ListItem extension adds support for the `<li>` HTML tag. It’s used for bullet lists and ordered lists and can’t really be used without them.
|
2020-08-19 03:39:41 +08:00
|
|
|
|
|
2020-09-23 18:33:45 +08:00
|
|
|
|
## Installation
|
2020-11-04 00:05:27 +08:00
|
|
|
|
::: warning Use with BulletList and/or OrderedList
|
2020-11-06 23:06:36 +08:00
|
|
|
|
This extension requires the [`BulletList`](/api/nodes/bullet-list) or [`OrderedList`](/api/nodes/ordered-list) node.
|
2020-09-09 22:15:22 +08:00
|
|
|
|
:::
|
|
|
|
|
|
|
2020-09-23 15:52:04 +08:00
|
|
|
|
```bash
|
2020-10-30 21:24:16 +08:00
|
|
|
|
# with npm
|
2020-09-23 15:52:04 +08:00
|
|
|
|
npm install @tiptap/extension-list-item
|
|
|
|
|
|
|
2020-10-30 21:24:16 +08:00
|
|
|
|
# with Yarn
|
2020-09-23 15:52:04 +08:00
|
|
|
|
yarn add @tiptap/extension-list-item
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2020-09-23 18:03:03 +08:00
|
|
|
|
## Settings
|
2020-09-10 16:21:24 +08:00
|
|
|
|
| Option | Type | Default | Description |
|
|
|
|
|
|
| ------ | ------ | ------- | -------------------------------------------- |
|
2020-09-23 18:33:45 +08:00
|
|
|
|
| class | string | – | Add a custom class to the rendered HTML tag. |
|
|
|
|
|
|
|
|
|
|
|
|
## Keyboard shortcuts
|
|
|
|
|
|
* New list item: `Enter`
|
|
|
|
|
|
* Sink a list item: `Tab`
|
2020-09-27 17:01:25 +08:00
|
|
|
|
* Lift a list item: `Shift` `Tab`
|
2020-09-23 18:33:45 +08:00
|
|
|
|
|
|
|
|
|
|
## Source code
|
|
|
|
|
|
[packages/extension-list-item/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/)
|
|
|
|
|
|
|
|
|
|
|
|
## Usage
|
2020-11-03 23:43:35 +08:00
|
|
|
|
<demo name="Nodes/ListItem" highlight="3-8,20-22,41-43" />
|
