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:

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

HTML Structure

By default, the plugin generates the following HTML structure:

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

Options

todoList.className

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

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

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

todoList.labelClassName

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

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

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

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:

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

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

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
            });
        }
    }
});
Copy

Usage Examples

Basic Usage

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

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

Custom Styling

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

Custom Checkbox Implementation

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;
        }
    }
});
Copy

CSS Customization

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

<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>
Copy

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

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.