BulletList

Create unordered bullet lists with nested support.

The BulletList extension allows you to create unordered bullet lists. It requires the ListItem extension to function properly.

Installation

npm

npm install @tiptap/extension-bullet-list @tiptap/extension-list-item

Usage

The BulletList extension is included in the StarterKit by default:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  extensions: [StarterKit],
})

To use it standalone:

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import BulletList from '@tiptap/extension-bullet-list'
import ListItem from '@tiptap/extension-list-item'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

const editor = new Editor({
  extensions: [
    Document,
    Paragraph,
    Text,
    BulletList,
    ListItem,
  ],
})

Configuration

itemTypeName

The node name for list items.

itemTypeName · string · default: "'listItem'"

Specifies which node type to use for list items.

BulletList.configure({
  itemTypeName: 'listItem',
})

HTMLAttributes

Custom HTML attributes to add to the bullet list element.

HTMLAttributes · Record<string, any> · default: "{}"

Custom HTML attributes that should be added to the rendered HTML tag.

BulletList.configure({
  HTMLAttributes: {
    class: 'my-bullet-list',
  },
})

keepMarks

Keep marks when splitting the list.

keepMarks · boolean · default: "false"

Whether to preserve text marks when creating new list items.

BulletList.configure({
  keepMarks: true,
})

keepAttributes

Keep attributes when splitting the list.

keepAttributes · boolean · default: "false"

Whether to preserve attributes when creating new list items.

BulletList.configure({
  keepAttributes: true,
})

Commands

toggleBulletList

Toggles a bullet list. If the current node is already a bullet list, it converts it to paragraphs.

editor.commands.toggleBulletList()

Keyboard Shortcuts

• Mod-Shift-8: Toggle bullet list

Input Rules

The BulletList extension supports Markdown-style input rules:

• Type - followed by a space to create a bullet list
• Type * followed by a space to create a bullet list
• Type + followed by a space to create a bullet list

Related Extensions

• ListItem - Required for bullet lists
• OrderedList - For numbered lists

Source Code

View the source code on GitHub:

packages/extension-list/src/bullet-list/bullet-list.ts