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:
@@ -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 isn’t editable
|
// if the editor isn’t 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
|
||||||
|
|||||||
Reference in New Issue
Block a user