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 a ordered list.
Modify backspace behavior
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-ordered-list @tiptap/extension-list-item
This extension requires the ListItem
node.
Settings
HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
OrderedList.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
itemTypeName
Specify the list item name.
Default: 'listItem'
OrderedList.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
OrderedList.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
OrderedList.configure({
keepAttributes: true,
})
Commands
toggleOrderedList()
Toggle an ordered list.
editor.commands.toggleOrderedList()
Keyboard shortcuts
Command | Windows/Linux | macOS |
---|---|---|
toggleOrderedList | Control + Shift + 7 | Cmd + Shift + 7 |