OrderedList extension

This extension enables you to use ordered lists in the editor. They are rendered as <ol> HTML tags.

Type 1. (or any other number followed by a dot) at the beginning of a new line and it will magically transform to an ordered list.

If you want to modify the standard behavior of backspace and delete functions for lists, you should read about the ListKeymap extension.

Install

npm install @tiptap/extension-list

This extension requires the ListItem node.

import { Editor } from '@tiptap/core'
import { OrderedList } from '@tiptap/extension-list'

new Editor({
  extensions: [OrderedList],
})

This extension is installed by default with the ListKit extension, so you don’t need to install it separately.

import { Editor } from '@tiptap/core'
import { ListKit } from '@tiptap/extension-list'

new Editor({
  extensions: [ListKit],
})

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

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

Specify the list item name.

Default: 'listItem'

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

Decides whether to keep the marks from a previous line after toggling the list either using inputRule or using the button

Default: false

OrderedList.configure({
  keepMarks: true,
})

Decides whether to keep the attributes from a previous line after toggling the list either using inputRule or using the button

Default: false

OrderedList.configure({
  keepAttributes: true,
})

Toggle an ordered list.

editor.commands.toggleOrderedList()

Command	Windows/Linux	macOS
toggleOrderedList	`Control` + `Shift` + `7`	`Cmd` + `Shift` + `7`

import { Editor } from '@tiptap/core'
import { OrderedList } from '@tiptap/extension-list/ordered-list'

new Editor({
  extensions: [OrderedList],
})