Tiptap Docs

List Node

Available for free

Styling for various list types in the Tiptap editor, including ordered lists, unordered lists, and task lists.

Installation

You can add the node component via Tiptap CLI

npx @tiptap/cli@latest add list-node

Usage

The ListNode provides styling for different types of lists within the editor. To use it, include it in your project and ensure you're using the list extensions from Tiptap.

import { useEditor, EditorContent } from '@tiptap/react'
import { TaskList } from '@tiptap/extension-task-list'
import { TaskItem } from '@tiptap/extension-task-item'
import { StarterKit } from '@tiptap/starter-kit'

import '@/components/tiptap-node/list-node/list-node.scss'

export default function EditorWithLists() {
  const editor = useEditor({
    extensions: [
      StarterKit,
      TaskList,
      TaskItem.configure({
        nested: true,
      }),
    ],
    content: `
      <ul>
        <li>Unordered list item</li>
        <li>Another unordered item</li>
      </ul>

      <ol>
        <li>Ordered list item</li>
        <li>Another ordered item</li>
      </ol>

      <ul data-type="taskList">
        <li data-type="taskItem" data-checked="true">Completed task</li>
        <li data-type="taskItem" data-checked="false">Pending task</li>
      </ul>
    `,
  })

  return <EditorContent editor={editor} />
}

Features

  • Consistent styling for ordered lists, unordered lists, and task lists
  • Proper nesting with appropriate indentation
  • Custom checkbox styling for task lists
  • Interactive checkboxes that respond to clicks
  • Visual strikethrough for completed tasks
  • Dark mode support

Requirements

Open source feature(s)