# Todo List Plugin for Jodit

This plugin adds a button to the toolbar that allows you to insert and manage interactive task lists with checkboxes. Todo lists are perfect for creating checklists, task lists, or any content that requires user interaction.

## Features

- Adds a "To-do List" button to the toolbar in the "list" group
- Creates interactive checklists with checkable items
- Automatically adds checkboxes to list items
- Supports customization of list appearance and checkbox behavior
- Handles proper cursor navigation around checkboxes
- Maintains list structure during editing operations

## Installation

If you are using a fat build of the editor, then the plugin is already included in it.
If you are using the slim build, then you need to enable it manually:

```js
Jodit.make('#editor', {
    extraPlugins: ['todo-list']
});
```

## HTML Structure

By default, the plugin generates the following HTML structure:

```html
<ul class="todo-list">
    <li>
        <label class="todo-list__label" contenteditable="false">
            <input tabindex="-1" type="checkbox" />
        </label>
        Task item text
    </li>
</ul>
```

## Options

### todoList.className

- Type: `string`
- Default: `'todo-list'`

The CSS class name applied to the `<ul>` element of the todo list.

```js
Jodit.make('#editor', {
    todoList: {
        className: 'custom-todo-list'
    }
});
```

### todoList.labelClassName

- Type: `string`
- Default: `'todo-list__label'`

The CSS class name applied to the `<label>` element that wraps the checkbox.

```js
Jodit.make('#editor', {
    todoList: {
        labelClassName: 'custom-todo-list__checkbox-wrapper'
    }
});
```

### todoList.inputFactory

- Type: `(jodit: IJodit) => HTMLElement`
- Default: See below

A function that creates the checkbox element. By default, it creates an `<input type="checkbox" tabindex="-1">` element.

Default implementation:
```js
function inputFactory(jodit) {
    return jodit.createInside.element('input', {
        type: 'checkbox',
        tabindex: -1
    });
}
```

You can customize this to create any element you want to use as a checkbox:

```js
Jodit.make('#editor', {
    todoList: {
        inputFactory: (jodit) => {
            // Create a custom checkbox using a span with a custom class
            return jodit.createInside.element('span', {
                class: 'custom-checkbox',
                tabindex: -1
            });
        }
    }
});
```

## Usage Examples

### Basic Usage

```js
const editor = Jodit.make('#editor', {
    buttons: ['todoList'],
    extraPlugins: ['todo-list']
});

// You can also trigger the todo list programmatically
editor.execCommand('todoList');
```

### Custom Styling

```js
const editor = Jodit.make('#editor', {
    buttons: ['todoList'],
    todoList: {
        className: 'task-list',
        labelClassName: 'task-checkbox'
    }
});
```

### Custom Checkbox Implementation

```js
const editor = Jodit.make('#editor', {
    buttons: ['todoList'],
    todoList: {
        inputFactory: (jodit) => {
            const checkbox = jodit.createInside.element('div', {
                class: 'custom-checkbox',
                tabindex: -1
            });
            
            // Add a checkmark icon inside
            const icon = jodit.createInside.element('i', {
                class: 'checkmark-icon'
            });
            
            checkbox.appendChild(icon);
            return checkbox;
        }
    }
});
```

## CSS Customization

You can customize the appearance of todo lists using CSS variables:

```html
<style>
    :root {
        --jd-todo-color-checkbox-border: #333;
        --jd-todo-color-checkbox-border-checked: #25ab33;
        --jd-todo-color-checkbox-bg-checked: #25ab33;
        --jd-todo-color-checkbox-mark-checked: #fff;
        --jd-todo-size-checkbox: 18px;
    }
</style>
```

These variables control:

- `--jd-todo-color-checkbox-border`: Border color of the unchecked checkbox
- `--jd-todo-color-checkbox-border-checked`: Border color of the checked checkbox
- `--jd-todo-color-checkbox-bg-checked`: Background color of the checked checkbox
- `--jd-todo-color-checkbox-mark-checked`: Color of the checkmark
- `--jd-todo-size-checkbox`: Size of the checkbox

## API Reference

### Configuration Interface

```typescript
interface TodoListConfig {
    className: string;                          // CSS class for the <ul> element
    labelClassName: string;                     // CSS class for the <label> element
    inputFactory: (jodit: IJodit) => HTMLElement; // Factory function for checkbox creation
}
```

### Control Configuration

The todo list control is configured with:

```typescript
interface TodoListControl {
    tooltip: string;                 // Tooltip text ("To-do List")
    icon: string;                    // Icon identifier ("todo-list")
    command: string;                 // Command name ("todolist")
    isActive: (editor: IJodit) => boolean; // Function to check if button is active
}
```

## How It Works

1. When the "To-do List" button is clicked, the plugin creates a new list or converts the selected content into a todo list
2. Each list item is automatically given a checkbox inside a label element
3. The plugin handles special cases for cursor navigation, ensuring that users can't place the cursor inside the checkbox label
4. When a checkbox is clicked, its checked state is toggled
5. The plugin maintains the proper structure during editing operations like Enter, Backspace, and Tab

This implementation ensures a smooth user experience when working with interactive task lists in the editor.