Task List Extension

Build interactive checklists with nested task items that users can toggle directly from the editor view.

Usage

The task list is powered by @tiptap/extension-list. It allows creating list items with checkboxes that are fully interactive. Nested lists are supported out of the box, allowing hierarchical checklists.

Keyboard Shortcuts

Users can interact with task lists using these standard keys:

• Enter: Creates a new checklist item at the current level.
• Tab: Indents the active item, nesting it under the item above.
• Shift + Tab: Outdents the active item to bring it to a higher level.

Styling Checklist Items

Inside Edra, checkbox states, custom checkmarks, and line-through styles for completed items are defined globally in editor.css. Checkboxes are aligned cleanly with standard text fonts and support standard hover interactions.