添加列表节点 UI 组件

在 Tiptap 编辑器中，针对不同类型的列表（包括有序列表、无序列表和任务列表）进行样式设计。

安装

你可以通过 Tiptap CLI 添加节点组件（适用于 Vite 或 Next.js）

npx @tiptap/cli add list-node

手动集成

对于非 Vite 或 Next.js 的框架，可以从开源仓库手动添加节点组件。

导入样式

此组件需要你导入我们添加到 styles/keyframe-animation.scss 和 styles/_variables.scss 的样式文件。

用法

ListNode 提供了编辑器中各种列表类型的样式支持。要使用它，请将其包含在你的项目中，并确保使用 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>无序列表项</li>
        <li>另一个无序项</li>
      </ul>

      <ol>
        <li>有序列表项</li>
        <li>另一个有序项</li>
      </ol>

      <ul data-type="taskList">
        <li data-type="taskItem" data-checked="true">已完成任务</li>
        <li data-type="taskItem" data-checked="false">待完成任务</li>
      </ul>
    `,
  })

  return <EditorContent editor={editor} />
}

功能特性

保持有序列表、无序列表和任务列表的样式一致性
支持正确的嵌套和合适的缩进
自定义的任务列表复选框样式
交互式复选框，支持点击操作
已完成任务显示删除线
支持暗色模式

依赖需求

开源功能(这些扩展为必需)：