OrderedList

Create ordered numbered lists with nested support.

The OrderedList extension allows you to create ordered numbered lists. It requires the ListItem extension to function properly and supports custom start numbers.

Installation

npm

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

Usage

The OrderedList 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 OrderedList from '@tiptap/extension-ordered-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,
    OrderedList,
    ListItem,
  ],
})

Configuration

itemTypeName

The node name for list items.

itemTypeName · string · default: "'listItem'"

Specifies which node type to use for list items.

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

HTMLAttributes

Custom HTML attributes to add to the ordered list element.

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

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

OrderedList.configure({
  HTMLAttributes: {
    class: 'my-ordered-list',
  },
})

keepMarks

Keep marks when splitting the list.

keepMarks · boolean · default: "false"

Whether to preserve text marks when creating new list items.

OrderedList.configure({
  keepMarks: true,
})

keepAttributes

Keep attributes when splitting the list.

keepAttributes · boolean · default: "false"

Whether to preserve attributes when creating new list items.

OrderedList.configure({
  keepAttributes: true,
})

Attributes

The OrderedList node supports the following attributes:

start

The starting number for the list.

editor.commands.insertContent({
  type: 'orderedList',
  attrs: { start: 5 },
  content: [
    // list items...
  ],
})

type

The list marker type (e.g., ‘1’, ‘a’, ‘A’, ‘i’, ‘I’).

editor.commands.insertContent({
  type: 'orderedList',
  attrs: { type: 'a' },
  content: [
    // list items...
  ],
})

Commands

toggleOrderedList

Toggles an ordered list. If the current node is already an ordered list, it converts it to paragraphs.

editor.commands.toggleOrderedList()

Keyboard Shortcuts

• Mod-Shift-7: Toggle ordered list

Input Rules

The OrderedList extension supports Markdown-style input rules:

• Type 1. followed by a space to create an ordered list
• Type any number followed by . and a space (e.g., 5.) to create a list starting at that number

Related Extensions

• ListItem - Required for ordered lists
• BulletList - For unordered lists

Source Code

View the source code on GitHub:

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