From 515300bb2604731640d0f9b0b92d6a807df23fb8 Mon Sep 17 00:00:00 2001
From: Kasper Nilsson <kaspern@google.com>
Date: Thu, 12 May 2022 23:09:29 -0700
Subject: [PATCH] Respond to review feedback

---
 docs/api/nodes/task-item.md                   |  2 ++
 packages/extension-task-item/src/task-item.ts | 21 ++++++++++---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/docs/api/nodes/task-item.md b/docs/api/nodes/task-item.md
index 64004d65..64d8f8e3 100644
--- a/docs/api/nodes/task-item.md
+++ b/docs/api/nodes/task-item.md
@@ -50,6 +50,8 @@ A handler for when the task item is checked or unchecked while the editor is set
 
 If this is not supplied, the task items are immutable while the editor is `readOnly`.
 
+If this function returns false, the check state will be preserved (`readOnly`).
+
 ```js
 TaskItem.configure({
   onReadOnlyChecked: (node, checked) => {
diff --git a/packages/extension-task-item/src/task-item.ts b/packages/extension-task-item/src/task-item.ts
index 1c15e490..ce3bfd2b 100644
--- a/packages/extension-task-item/src/task-item.ts
+++ b/packages/extension-task-item/src/task-item.ts
@@ -2,7 +2,7 @@ import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'
 import { Node as ProseMirrorNode } from 'prosemirror-model'
 
 export interface TaskItemOptions {
-  onReadOnlyChecked?: (node: ProseMirrorNode, checked: boolean) => void
+  onReadOnlyChecked?: (node: ProseMirrorNode, checked: boolean) => boolean
   nested: boolean
   HTMLAttributes: Record<string, any>
 }
@@ -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,
         }),
       },
@@ -85,9 +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')
@@ -96,7 +94,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
 
       checkboxWrapper.contentEditable = 'false'
       checkbox.type = 'checkbox'
-      checkbox.addEventListener('change', event => {
+      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) {
@@ -125,7 +123,10 @@ export const TaskItem = Node.create<TaskItemOptions>({
             .run()
         }
         if (!editor.isEditable && this.options.onReadOnlyChecked) {
-          this.options.onReadOnlyChecked(node, checked)
+          // Reset state if onReadOnlyChecked returns false
+          if (!this.options.onReadOnlyChecked(node, checked)) {
+            checkbox.checked = !checkbox.checked
+          }
         }
       })
 
@@ -148,7 +149,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
       return {
         dom: listItem,
         contentDOM: content,
-        update: updatedNode => {
+        update: (updatedNode) => {
           if (updatedNode.type !== this.type) {
             return false
           }
@@ -171,7 +172,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
       wrappingInputRule({
         find: inputRegex,
         type: this.type,
-        getAttributes: match => ({
+        getAttributes: (match) => ({
           checked: match[match.length - 1] === 'x',
         }),
       }),