feat: Add task list support to text editor

[viktorSoftDev]

📝 Description

This PR adds comprehensive task list (checkbox) support to the limel-text-editor component. Users can now create, interact with, and manage task lists with native HTML checkboxes, full keyboard navigation, and markdown support.

✨ Features Added

Core Task List Functionality

• Interactive checkboxes: Native HTML <input type="checkbox"> elements that respond to clicks
• Keyboard navigation: Full support for Enter, Tab/Shift-Tab, and arrow key navigation
• Toolbar integration: Task list button in the editor toolbar with keyboard shortcut
• Markdown support: Parsing and serialization of GitHub Flavored Markdown task list syntax (- [ ] and - [x])

ProseMirror Integration

• Custom schema: task_list and task_list_item node types with proper DOM parsing
• Node views: Custom TaskListItemView for interactive checkbox rendering
• Commands: Integration with prosemirror-schema-list for list operations
• Plugins: Dedicated plugins for Enter key handling and Tab indentation

Enhanced User Experience

• Visual styling: Consistent appearance with other form elements
• Indentation support: Tab/Shift-Tab for nesting task list items
• Focus management: Proper focus handling when navigating between checkboxes and content
• Accessibility: ARIA attributes and semantic HTML structure

🎯 Usage

Basic Usage

<limel-text-editor
    value="- [ ] Unchecked task\n- [x] Completed task"
    contentType="markdown"
/>

Keyboard Shortcuts

• Insert task list: Ctrl/Cmd + Shift + 9
• New task item: Enter (when cursor is in a task list item)
  Indent/outdent: Tab / Shift+Tab
  Toggle checkbox: Click on checkbox or Space when focused

✅ Testing

• Manual testing of all keyboard interactions
• Checkbox click handling verification
• Markdown parsing and serialization testing
• Toolbar integration testing
• Focus management validation
• Cross-browser compatibility verified
• Example component functionality confirmed

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/yet-another-checklist

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🧪 Early access (Sonnet 4.5): enabled

We are currently testing the Sonnet 4.5 model, which is expected to improve code review quality. However, this model may lead to increased noise levels in the review comments. Please disable the early access features if the noise level causes any inconvenience.

Note:

• Public repositories are always opted into early access features.
• You can enable or disable early access features from the CodeRabbit UI or by updating the CodeRabbit configuration file.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[viktorSoftDev]

Had a little (read a lot of) help from a co-driver creating this hack ✅✅✅

[github-actions]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3690/