2021-10-14 06:13:50 +08:00
---
description: Everything looks more serious with a few bullet points.
2021-10-15 03:20:21 +08:00
icon: list-unordered
2021-10-14 06:13:50 +08:00
---
2020-08-19 03:39:41 +08:00
# BulletList
2021-01-25 17:35:52 +08:00
[![Version ](https://img.shields.io/npm/v/@tiptap/extension-bullet-list.svg?label=version )](https://www.npmjs.com/package/@tiptap/extension-bullet-list)
[![Downloads ](https://img.shields.io/npm/dm/@tiptap/extension-bullet-list.svg )](https://npmcharts.com/compare/@tiptap/extension-bullet-list?minimal=true)
2020-11-03 23:13:13 +08:00
This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags.
2020-08-19 03:39:41 +08:00
2020-09-23 18:03:03 +08:00
Type < code > * < / code > , < code > - < / code > or < code > + < / code > at the beginning of a new line and it will magically transform to a bullet list.
2020-09-15 23:26:42 +08:00
2020-09-23 18:03:03 +08:00
## Installation
2020-09-23 15:52:04 +08:00
```bash
2020-09-23 18:03:03 +08:00
npm install @tiptap/extension -bullet-list @tiptap/extension -list-item
2020-09-23 15:52:04 +08:00
```
2021-02-12 22:02:40 +08:00
This extension requires the [`ListItem` ](/api/nodes/list-item ) node.
2020-09-23 18:03:03 +08:00
## Settings
2021-10-02 05:27:39 +08:00
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
```js
BulletList.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
```
2020-08-19 03:39:41 +08:00
2021-12-11 07:13:24 +08:00
### itemTypeName
Specify the list item name.
Default: `'listItem'`
```js
BulletList.configure({
itemTypeName: 'listItem',
})
```
2023-02-22 17:13:28 +08:00
### 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,
})
```
2021-12-11 07:13:24 +08:00
2020-08-20 21:33:16 +08:00
## Commands
2021-10-02 06:14:44 +08:00
### toggleBulletList()
Toggles a bullet list.
```js
editor.commands.toggleBulletList()
```
2020-08-19 03:39:41 +08:00
2020-09-10 17:24:33 +08:00
## Keyboard shortcuts
2021-10-02 04:57:27 +08:00
| Command | Windows/Linux | macOS |
| ---------------- | ------------------------------- | --------------------------- |
| toggleBulletList | `Control` `Shift` `8` | `Cmd` `Shift` `8` |
2020-08-19 03:39:41 +08:00
2020-09-21 22:59:28 +08:00
## Source code
2021-04-21 21:31:11 +08:00
[packages/extension-bullet-list/ ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bullet-list/ )
2020-08-19 03:39:41 +08:00
2020-09-15 22:50:54 +08:00
## Usage
2021-10-19 00:01:47 +08:00
https://embed.tiptap.dev/preview/Nodes/BulletList