@lexical/list

Creating Ordered Lists

This feature allows you to create an ordered list (numbered list) within the Lexical editor. The code sample demonstrates how to create a new ordered list node and append it to the editor's root.

import { $createListNode, ListNode } from '@lexical/list';

const orderedListNode = $createListNode('number');
editor.update(() => {
  const root = $getRoot();
  root.append(orderedListNode);
});

Creating Unordered Lists

This feature allows you to create an unordered list (bulleted list) within the Lexical editor. The code sample shows how to create a new unordered list node and append it to the editor's root.

import { $createListNode, ListNode } from '@lexical/list';

const unorderedListNode = $createListNode('bullet');
editor.update(() => {
  const root = $getRoot();
  root.append(unorderedListNode);
});

Converting List Types

This feature allows you to convert an existing list from one type to another (e.g., from ordered to unordered). The code sample demonstrates how to find a list node in the current selection and change its type.

import { $createListNode, ListNode } from '@lexical/list';

editor.update(() => {
  const selection = $getSelection();
  if (selection !== null) {
    const listNode = selection.getNodes().find(node => node instanceof ListNode);
    if (listNode !== null) {
      listNode.setListType('bullet'); // Convert to unordered list
    }
  }
});