editor: fix task list state & readonly bugs

* fix task list complete state not showing on first load * fix task list allowing paste when readonly Signed-off-by: 01zulfi <[email protected]>
streetwriters · Dec 19, 2024 · 54a66c6 · 54a66c6
1 parent 6098935
commit 54a66c6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/packages/editor/src/extensions/task-list/component.tsx b/packages/editor/src/extensions/task-list/component.tsx
@@ -230,6 +230,9 @@ export function TaskListComponent(
         ref={forwardRef}
         dir={textDirection}
         contentEditable={editor.isEditable && !readonly}
+        onPaste={(e) => {
+          if (readonly) e.preventDefault();
+        }}
         sx={{
           ul: {
             display: "block",

diff --git a/packages/editor/src/extensions/task-list/task-list.ts b/packages/editor/src/extensions/task-list/task-list.ts
@@ -32,7 +32,11 @@ import {
   findParentNodeClosestToPos,
   getExactChangedNodes
 } from "../../utils/prosemirror.js";
-import { countCheckedItems, findRootTaskList, toggleChildren } from "./utils.js";
+import {
+  countCheckedItems,
+  findRootTaskList,
+  toggleChildren
+} from "./utils.js";
 import { Node as ProsemirrorNode } from "@tiptap/pm/model";
 import { TaskItemNode } from "../task-item/index.js";
 
@@ -49,7 +53,15 @@ export const TaskListNode = TaskList.extend({
     return {
       stats: {
         default: { checked: 0, total: 0 },
-        rendered: false
+        rendered: false,
+        parseHTML: (element) => {
+          if (!element.dataset.title) return { checked: 0, total: 0 };
+          const items = element.querySelectorAll("li.checklist--item");
+          const checked = Array.from(items).filter((item) =>
+            item.classList.contains("checked")
+          ).length;
+          return { checked, total: items.length };
+        }
       },
       title: {
         default: null,