Make option a callback, update docs

packages/extension-task-item/package.json

@@ -23,6 +23,9 @@
   "peerDependencies": {
     "@tiptap/core": "^2.0.0-beta.1"
   },
+  "dependencies": {
+    "prosemirror-model": "^1.16.1"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",

packages/extension-task-item/src/task-item.ts

@@ -1,9 +1,10 @@
 import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'
+import { Node as ProseMirrorNode } from 'prosemirror-model'
 
 export interface TaskItemOptions {
-  nested: boolean,
-  checkable: boolean,
-  HTMLAttributes: Record<string, any>,
+  onReadOnlyChecked?: (node: ProseMirrorNode, checked: boolean) => void
+  nested: boolean
+  HTMLAttributes: Record<string, any>
 }
 
 export const inputRegex = /^\s*(\[([( |x])?\])\s$/
@@ -14,7 +15,6 @@ export const TaskItem = Node.create<TaskItemOptions>({
   addOptions() {
     return {
       nested: false,
-      checkable: false,
       HTMLAttributes: {},
     }
   },
@@ -30,8 +30,8 @@ export const TaskItem = Node.create<TaskItemOptions>({
       checked: {
         default: false,
         keepOnSplit: false,
-        parseHTML: element => element.getAttribute('data-checked') === 'true',
-        renderHTML: attributes => ({
+        parseHTML: (element) => element.getAttribute('data-checked') === 'true',
+        renderHTML: (attributes) => ({
           'data-checked': attributes.checked,
         }),
       },
@@ -50,28 +50,21 @@ export const TaskItem = Node.create<TaskItemOptions>({
   renderHTML({ node, HTMLAttributes }) {
     return [
       'li',
-      mergeAttributes(
-        this.options.HTMLAttributes,
-        HTMLAttributes,
-        { 'data-type': this.name },
-      ),
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        'data-type': this.name,
+      }),
       [
         'label',
         [
           'input',
           {
             type: 'checkbox',
-            checked: node.attrs.checked
-              ? 'checked'
-              : null,
+            checked: node.attrs.checked ? 'checked' : null,
           },
         ],
         ['span'],
       ],
-      [
-        'div',
-        0,
-      ],
+      ['div', 0],
     ]
   },
 
@@ -92,12 +85,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
   },
 
   addNodeView() {
-    return ({
-      node,
-      HTMLAttributes,
-      getPos,
-      editor,
-    }) => {
+    return ({ node, HTMLAttributes, getPos, editor }) => {
       const listItem = document.createElement('li')
       const checkboxWrapper = document.createElement('label')
       const checkboxStyler = document.createElement('span')
@@ -106,10 +94,10 @@ export const TaskItem = Node.create<TaskItemOptions>({
 
       checkboxWrapper.contentEditable = 'false'
       checkbox.type = 'checkbox'
-      checkbox.addEventListener('change', event => {
-        // if the editor isn’t editable and the item isn't checkable
-        // we have to undo the latest change
-        if (!editor.isEditable && !this.options.checkable) {
+      checkbox.addEventListener('change', (event) => {
+        // if the editor isn’t editable and we don't have a handler for
+        // readonly checks we have to undo the latest change
+        if (!editor.isEditable && !this.options.onReadOnlyChecked) {
           checkbox.checked = !checkbox.checked
 
           return
@@ -134,6 +122,9 @@ export const TaskItem = Node.create<TaskItemOptions>({
             })
             .run()
         }
+        if (!editor.isEditable && this.options.onReadOnlyChecked) {
+          this.options.onReadOnlyChecked(node, checked)
+        }
       })
 
       Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {
@@ -148,16 +139,14 @@ export const TaskItem = Node.create<TaskItemOptions>({
       checkboxWrapper.append(checkbox, checkboxStyler)
       listItem.append(checkboxWrapper, content)
 
-      Object
-        .entries(HTMLAttributes)
-        .forEach(([key, value]) => {
-          listItem.setAttribute(key, value)
-        })
+      Object.entries(HTMLAttributes).forEach(([key, value]) => {
+        listItem.setAttribute(key, value)
+      })
 
       return {
         dom: listItem,
         contentDOM: content,
-        update: updatedNode => {
+        update: (updatedNode) => {
           if (updatedNode.type !== this.type) {
             return false
           }
@@ -180,7 +169,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
       wrappingInputRule({
         find: inputRegex,
         type: this.type,
-        getAttributes: match => ({
+        getAttributes: (match) => ({
           checked: match[match.length - 1] === 'x',
         }),
       }),