Task list

The task-list extension parses GFM task list items (- [ ] and - [x]), renders a clickable checkbox in place of the list and task markers, and adds commands to create or remove task items.

SetupCopy Anchor Link

Import TaskListExtension and register it with the editor. Create the mount element before this code runs:

import { Editor } from "@inksane/core";
import { TaskListExtension } from "@inksane/core/extensions/task-list";

const editor = new Editor({
  element: document.getElementById("editor")!,
  content: "- [ ] Buy milk",
  extensions: [TaskListExtension],
});

BaseKit includes task lists. If you use the kit, no separate registration is needed. Disable the feature with BaseKit({ taskList: false }).

What it addsCopy Anchor Link

• Parses GFM task list items (- [ ], - [x], and - [X]) inside bullet and ordered lists.
• Hides the list marker and task brackets while the selection is outside the item, and renders an <input class="inksane-task-checkbox" type="checkbox"> inside .inksane-list-marker--task.
• Clicking the checkbox toggles the Markdown source between [ ] and [x].
• Converts pasted <input type="checkbox"> elements inside <li> into [ ] and [x].
• Registers the insertTaskList, removeTaskList, and toggleTaskList commands, plus the taskList state query.

CommandsCopy Anchor Link

All three commands accept an optional pos as a number or a { from, to } range. Without pos, they use the current selection. Converting a bullet or ordered list item replaces its marker instead of stacking markers.

editor.commands.toggleTaskList();

editor.chain().insertTaskList({ checked: true }).focus().run();

Use editor.isActive("taskList") to check whether the selection is on a task item, or editor.isActive("taskList", { checked: true }) to match its state.

StylingCopy Anchor Link

[data-inksane-editor-content] {
  .inksane-list-marker--task {
    display: inline-block;
    padding-right: 6px;
    user-select: none;
  }

  .inksane-task-checkbox {
    cursor: pointer;
    vertical-align: middle;
  }
}