fix: Fixed issue checkbox checked state not getting saved

packages/nc-gui/components/cell/RichText.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import StarterKit from '@tiptap/starter-kit'
-import TaskItem from '@tiptap/extension-task-item'
 import TaskList from '@tiptap/extension-task-list'
 import { EditorContent, useEditor } from '@tiptap/vue-3'
 import TurndownService from 'turndown'
 import { marked } from 'marked'
 import { generateJSON } from '@tiptap/html'
 import Underline from '@tiptap/extension-underline'
+import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
 
 const props = defineProps<{
@@ -25,10 +25,13 @@ turndownService.addRule('taskList', {
   filter: (node) => {
     return node.nodeName === 'LI' && !!node.getAttribute('data-checked')
   },
-  replacement: (content) => {
+  replacement: (content, node: any) => {
     // Remove the first \n\n and last \n\n
     const processContent = content.replace(/^\n\n/, '').replace(/\n\n$/, '')
-    return `[ ] ${processContent}\n\n`
+
+    const isChecked = node.getAttribute('data-checked') === 'true'
+
+    return `[${isChecked ? 'x' : ' '}] ${processContent}\n\n`
   },
 })
 
@@ -60,15 +63,11 @@ const checkListItem = {
     return false
   },
   renderer(token: any) {
-    return `<ul data-type="taskList">
+    return `<ul data-type="taskList"><li data-checked="${
-      <li data-checked="false">
+      token.checked ? 'true' : 'false'
-        <label>
+    }" data-type="taskItem"><label><input type="checkbox" ${
-          <input type="checkbox" />
+      token.checked ? 'checked="checked"' : ''
-        </label>
+    }><span></span></label><div>${(this as any).parser.parseInline(token.tokens)}</div></li></ul>` // parseInline to turn child tokens into HTML
-      <div>
-        <p>${(this as any).parser.parseInline(token.tokens)}</p>
-      </div>
-    </ul>` // parseInline to turn child tokens into HTML
   },
 }
 

packages/nc-gui/helpers/dbTiptapExtensions/task-item.ts

@@ -0,0 +1,186 @@
+import type { KeyboardShortcutCommand } from '@tiptap/core'
+import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+
+export interface TaskItemOptions {
+  onReadOnlyChecked?: (node: ProseMirrorNode, checked: boolean) => boolean
+  nested: boolean
+  HTMLAttributes: Record<string, any>
+  taskListTypeName: string
+}
+
+export const inputRegex = /^\s*(\[([( |x])?\])\s$/
+
+export const TaskItem = Node.create<TaskItemOptions>({
+  name: 'taskItem',
+
+  addOptions() {
+    return {
+      nested: false,
+      HTMLAttributes: {},
+      taskListTypeName: 'taskList',
+    }
+  },
+
+  content() {
+    return this.options.nested ? 'paragraph block*' : 'paragraph+'
+  },
+
+  defining: true,
+
+  addAttributes() {
+    return {
+      checked: {
+        default: false,
+        keepOnSplit: false,
+        parseHTML: (element) => element.getAttribute('data-checked') === 'true',
+        renderHTML: (attributes) => ({
+          'data-checked': attributes.checked,
+        }),
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `li[data-type="${this.name}"]`,
+        priority: 51,
+      },
+    ]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      'li',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        'data-type': this.name,
+      }),
+      [
+        'label',
+        [
+          'input',
+          {
+            type: 'checkbox',
+            checked: node.attrs.checked ? 'checked' : null,
+          },
+        ],
+        ['span'],
+      ],
+      ['div', 0],
+    ]
+  },
+
+  addKeyboardShortcuts() {
+    const shortcuts: {
+      [key: string]: KeyboardShortcutCommand
+    } = {
+      'Enter': () => this.editor.commands.splitListItem(this.name),
+      'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
+    }
+
+    if (!this.options.nested) {
+      return shortcuts
+    }
+
+    return {
+      ...shortcuts,
+      Tab: () => this.editor.commands.sinkListItem(this.name),
+    }
+  },
+
+  addNodeView() {
+    return ({ node, HTMLAttributes, getPos, editor }) => {
+      const listItem = document.createElement('li')
+      const checkboxWrapper = document.createElement('label')
+      const checkboxStyler = document.createElement('span')
+      const checkbox = document.createElement('input')
+      const content = document.createElement('div')
+
+      checkboxWrapper.contentEditable = 'false'
+      checkbox.type = 'checkbox'
+      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
+        }
+
+        const { checked } = event.target as any
+
+        if (editor.isEditable && typeof getPos === 'function') {
+          editor
+            .chain()
+            .focus(undefined, { scrollIntoView: false })
+            .command(({ tr }) => {
+              const position = getPos()
+              const currentNode = tr.doc.nodeAt(position)
+
+              tr.setNodeMarkup(position, undefined, {
+                ...currentNode?.attrs,
+                checked,
+              })
+
+              return true
+            })
+            .run()
+        }
+        if (!editor.isEditable && this.options.onReadOnlyChecked) {
+          // Reset state if onReadOnlyChecked returns false
+          if (!this.options.onReadOnlyChecked(node, checked)) {
+            checkbox.checked = !checkbox.checked
+          }
+        }
+      })
+
+      Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {
+        listItem.setAttribute(key, value)
+      })
+
+      listItem.dataset.checked = node.attrs.checked
+      if (node.attrs.checked) {
+        checkbox.setAttribute('checked', 'checked')
+      }
+
+      checkboxWrapper.append(checkbox, checkboxStyler)
+      listItem.append(checkboxWrapper, content)
+
+      Object.entries(HTMLAttributes).forEach(([key, value]) => {
+        listItem.setAttribute(key, value)
+      })
+
+      return {
+        dom: listItem,
+        contentDOM: content,
+        update: (updatedNode) => {
+          if (updatedNode.type !== this.type) {
+            return false
+          }
+
+          listItem.dataset.checked = updatedNode.attrs.checked
+          if (updatedNode.attrs.checked) {
+            checkbox.setAttribute('checked', 'checked')
+          } else {
+            checkbox.removeAttribute('checked')
+          }
+
+          return true
+        },
+      }
+    }
+  },
+
+  addInputRules() {
+    return [
+      wrappingInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: (match) => ({
+          checked: match[match.length - 1] === 'x',
+        }),
+      }),
+    ]
+  },
+})