Toggle button to change the list type

A button for toggling through different list types like bullet, ordered and task lists.

Install

You can add the component via Tiptap CLI (for Vite or Next.js)

npx @tiptap/cli add list-button

Manual Integration

For frameworks other than Vite or Next.js, add the component manually from the [https://github.com/ueberdosis/tiptap-ui-components/tree/main/apps/web/src/components/tiptap-ui/list-button).

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

Usage

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

import '@/components/tiptap-node/code-block-node/code-block-node.scss'
import '@/components/tiptap-node/list-node/list-node.scss'
import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, TaskList, TaskItem.configure({ nested: true })],
    content: `
        <ul>
            <li>
                <strong>Bold</strong> for emphasis with <code>**</code> or <code>⌘+B</code> or the <code>B</code> button.
            </li>
            <li>
                <em>Italic</em> for subtle nuances with <code>*</code> or <code>⌘+I</code> or the <code>I</code> button.
            </li>
            <li>
                <s>Strikethrough</s> to show revisions with <code>~~</code> or the <code>~~S~~</code> button.
            </li>
        </ul>
        <ul data-type="taskList">
          <li data-type="taskItem" data-checked="true">
            <div>Test template</div>
          </li>
          <li data-type="taskItem" data-checked="false">
            <div>
              <a target="_blank" rel="noopener noreferrer nofollow" href="https://tiptap.dev/pricing">Create account</a>
            </div>
          </li>
          <li data-type="taskItem" data-checked="false">
            <div>Download free template</div>
          </li>
        </ul>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <ListButton type="bulletList" />
        <ListButton type="orderedList" />
        <ListButton type="taskList" />
      </div>

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

Props

Name	Type	Default	Description
editor	Editor \| null	null	The Tiptap editor instance
type	'bulletList' \| 'orderedList' \| 'taskList'	required	The type of list to toggle
hideWhenUnavailable	boolean	false	Whether the button should be hide if not available
text	string	-	Text to display alongside the icon

Requirements

Used reference components

use-tiptap-editor (hook)
tiptap-utils (lib)
button (primitive)
list-icon (icon)
list-todo-icon (icon)
list-ordered-icon (icon)

Open source feature(s)

@tiptap/extension-task-list
@tiptap/extension-task-item