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)