Add option to allow task items to be checkable (uncontrolled)

Useful for drafting interactive documents. Could see this expanding to potentially also support passing a callback?

Will happily update documentation if this approach is accepted!
This commit is contained in:
Kasper Nilsson
2022-02-02 14:56:05 -08:00
committed by Dominik
parent ecee74a94d
commit 8874e5e5e6

View File

@@ -2,6 +2,7 @@ import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'
export interface TaskItemOptions { export interface TaskItemOptions {
nested: boolean, nested: boolean,
checkable: boolean,
HTMLAttributes: Record<string, any>, HTMLAttributes: Record<string, any>,
} }
@@ -13,6 +14,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
addOptions() { addOptions() {
return { return {
nested: false, nested: false,
checkable: false,
HTMLAttributes: {}, HTMLAttributes: {},
} }
}, },
@@ -105,9 +107,9 @@ export const TaskItem = Node.create<TaskItemOptions>({
checkboxWrapper.contentEditable = 'false' checkboxWrapper.contentEditable = 'false'
checkbox.type = 'checkbox' checkbox.type = 'checkbox'
checkbox.addEventListener('change', event => { checkbox.addEventListener('change', event => {
// if the editor isnt editable // if the editor isnt editable and the item isn't checkable
// we have to undo the latest change // we have to undo the latest change
if (!editor.isEditable) { if (!editor.isEditable && !checkable) {
checkbox.checked = !checkbox.checked checkbox.checked = !checkbox.checked
return return