mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-04 11:49:02 +08:00
36bb1e1041
* feat: #3540 Ability to preserve marks on lists * feat: preserveAttrs in list items * `keepMarks` is working, but need help with `keepAttrs` * fix: conflict * avoid casting
85 lines
2.1 KiB
Markdown
85 lines
2.1 KiB
Markdown
---
|
|
description: Everything looks more serious with a few bullet points.
|
|
icon: list-unordered
|
|
---
|
|
|
|
# BulletList
|
|
[](https://www.npmjs.com/package/@tiptap/extension-bullet-list)
|
|
[](https://npmcharts.com/compare/@tiptap/extension-bullet-list?minimal=true)
|
|
|
|
This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags.
|
|
|
|
Type <code>* </code>, <code>- </code> or <code>+ </code> at the beginning of a new line and it will magically transform to a bullet list.
|
|
|
|
## Installation
|
|
```bash
|
|
npm install @tiptap/extension-bullet-list @tiptap/extension-list-item
|
|
```
|
|
|
|
This extension requires the [`ListItem`](/api/nodes/list-item) node.
|
|
|
|
## Settings
|
|
|
|
### HTMLAttributes
|
|
Custom HTML attributes that should be added to the rendered HTML tag.
|
|
|
|
```js
|
|
BulletList.configure({
|
|
HTMLAttributes: {
|
|
class: 'my-custom-class',
|
|
},
|
|
})
|
|
```
|
|
|
|
### itemTypeName
|
|
Specify the list item name.
|
|
|
|
Default: `'listItem'`
|
|
|
|
```js
|
|
BulletList.configure({
|
|
itemTypeName: 'listItem',
|
|
})
|
|
```
|
|
### keepMarks
|
|
Decides whether to keep the marks from a previous line after toggling the list either using `inputRule` or using the button
|
|
|
|
Default: `false`
|
|
|
|
```js
|
|
BulletList.configure({
|
|
keepMarks: true,
|
|
})
|
|
```
|
|
|
|
### keepAttributes
|
|
Decides whether to keep the attributes from a previous line after toggling the list either using `inputRule` or using the button
|
|
|
|
Default: `false`
|
|
|
|
```js
|
|
BulletList.configure({
|
|
keepAttributes: true,
|
|
})
|
|
```
|
|
|
|
## Commands
|
|
|
|
### toggleBulletList()
|
|
Toggles a bullet list.
|
|
|
|
```js
|
|
editor.commands.toggleBulletList()
|
|
```
|
|
|
|
## Keyboard shortcuts
|
|
| Command | Windows/Linux | macOS |
|
|
| ---------------- | ------------------------------- | --------------------------- |
|
|
| toggleBulletList | `Control` `Shift` `8` | `Cmd` `Shift` `8` |
|
|
|
|
## Source code
|
|
[packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bullet-list/)
|
|
|
|
## Usage
|
|
https://embed.tiptap.dev/preview/Nodes/BulletList
|