Ordered List

The OrderedList node provides a block-level numbered list container (<ol>). It supports a start attribute for custom numbering, a markdown-style input rule (number + . + space), a keyboard shortcut (Mod-Shift-7), and automatic inclusion of the ListItem node and ListKeymap extension for Tab/Shift-Tab indentation.

Live Playground

Type a number followed by . and space (e.g. 1. ) at the start of a line to create an ordered list. Use Tab to indent and Shift-Tab to outdent.

Click to try it out

The button above the editor is a custom HTML button wired to toggleOrderedList(). Active state is tracked with editor.isActive('orderedList').

Click to try it out

Usage

OrderedList is included in StarterKit. If you are building a custom setup without StarterKit, add it manually:

import { Editor, Document, Text, Paragraph, OrderedList } from '@domternal/core';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Text, Paragraph, OrderedList],
  content: '<ol><li><p>First item</p></li><li><p>Second item</p></li></ol>',
});

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent } from '@domternal/angular';
import { Editor, Document, Text, Paragraph, OrderedList } from '@domternal/core';

@Component({
  selector: 'app-editor',
  imports: [DomternalEditorComponent],
  template: `
    <domternal-editor
      [extensions]="extensions"
      [content]="content"
      (editorCreated)="editor.set($event)"
    />
  `,
})
export class EditorComponent {
  editor = signal<Editor | null>(null);
  extensions = [Document, Text, Paragraph, OrderedList];
  content = '<ol><li><p>First item</p></li><li><p>Second item</p></li></ol>';
}

import { Domternal } from '@domternal/react';
import { Document, Text, Paragraph, OrderedList } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Text, Paragraph, OrderedList]}
      content="<ol><li><p>First item</p></li><li><p>Second item</p></li></ol>"
    >
      <Domternal.Content />
    </Domternal>
  );
}

Schema

Property	Value
ProseMirror name	`orderedList`
Type	Node
Group	`block list`
Content	`listItem+` (one or more list items)
HTML tag	`<ol>`

The list group allows ProseMirror to identify this node as a list container, which is used by list-related commands like toggleList.

Options

Option	Type	Default	Description
`HTMLAttributes`	`Record<string, unknown>`	`{}`	HTML attributes added to the `<ol>` element
`itemTypeName`	`string`	`'listItem'`	Name of the list item node type used by `toggleList`

Custom HTML attributes

import { OrderedList } from '@domternal/core';

const CustomOrderedList = OrderedList.configure({
  HTMLAttributes: { class: 'my-numbered-list' },
});

Attributes

Attribute	Type	Default	Description
`start`	`number`	`1`	The starting number for the list

The start attribute is parsed from the <ol> element’s start HTML attribute. When the value is 1 (the default), the start attribute is omitted from the rendered HTML. For any other value, it is rendered as <ol start="5">.

Custom start number

Typing 5. at the start of a line creates an ordered list starting at 5. The start number is extracted from the input rule match.

// Set content with a list starting at 3
editor.setContent('<ol start="3"><li><p>Third</p></li><li><p>Fourth</p></li></ol>');

Commands

Command	Description
`toggleOrderedList()`	Toggle the current selection between ordered list and paragraph

// Toggle ordered list on/off
editor.commands.toggleOrderedList();

// With chaining
editor.chain().focus().toggleOrderedList().run();

toggleOrderedList wraps the selected blocks in an <ol> with <li> items. If the selection is already inside an ordered list, it unwraps it back to paragraphs. If the selection is inside a different list type (bullet list, task list), it converts it to an ordered list.

Keyboard shortcuts

Shortcut	Command
`Mod-Shift-7`	`toggleOrderedList()`
`Enter`	Split list item at cursor, or lift out of list if empty
`Tab`	Indent list item (sink)
`Shift-Tab`	Outdent list item (lift)
`Backspace`	Lift list item when at the start of an empty item

The Enter, Tab, Shift-Tab, and Backspace shortcuts are provided by the ListItem node and ListKeymap extension, which are automatically included when you add OrderedList.

Input rules

Input	Result
`1.` + space	Ordered list starting at 1
`5.` + space	Ordered list starting at 5
`42.` + space	Ordered list starting at 42

Type any number followed by . and space at the start of a new line. The line wraps in an ordered list with the start attribute set to the typed number. These input rules only fire outside of existing lists - typing 1. inside a list item inserts the characters as plain text. To nest lists, use Tab to indent a list item.

The regex pattern is /^(\d+)\.\s$/, which captures the number for the start attribute.

OrderedList registers a button in the toolbar with the name orderedList in group lists at priority 190.

Item	Command	Icon	Shortcut
Ordered List	`toggleOrderedList`	`listNumbers`	`Mod-Shift-7`

Included extensions

OrderedList automatically includes these extensions via addExtensions():

Extension	Description
ListItem	The `<li>` node used inside the list
ListKeymap	Tab/Shift-Tab indentation and Backspace handling (included by ListItem)

This means adding OrderedList to your extensions array is sufficient. You don’t need to add ListItem or ListKeymap separately.

JSON representation

{
  "type": "orderedList",
  "attrs": { "start": 1 },
  "content": [
    {
      "type": "listItem",
      "content": [
        {
          "type": "paragraph",
          "content": [
            { "type": "text", "text": "First item" }
          ]
        }
      ]
    },
    {
      "type": "listItem",
      "content": [
        {
          "type": "paragraph",
          "content": [
            { "type": "text", "text": "Second item" }
          ]
        }
      ]
    }
  ]
}

An ordered list starting at 5:

{
  "type": "orderedList",
  "attrs": { "start": 5 },
  "content": [
    {
      "type": "listItem",
      "content": [
        {
          "type": "paragraph",
          "content": [
            { "type": "text", "text": "Fifth item" }
          ]
        }
      ]
    }
  ]
}

Source

@domternal/core - OrderedList.ts