editor: fix task list state & readonly bugs (streetwriters#7117)

* fix task list complete state not showing on first load * fix task list allowing paste when readonly Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>
Rom-Lec · Dec 24, 2024 · 4bebf5a · 4bebf5a
1 parent 68eb502
commit 4bebf5a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 22 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,16 @@ export const TaskListNode = TaskList.extend({
     return {
       stats: {
         default: { checked: 0, total: 0 },
-        rendered: false
+        rendered: false,
+        parseHTML: (element) => {
+          // do not update stats for nested task lists
+          if (!!element.closest("ul")) return { checked: 0, total: 0 };
+          const total = element.querySelectorAll("li.checklist--item").length;
+          const checked = element.querySelectorAll(
+            "li.checklist--item.checked"
+          ).length;
+          return { checked, total };
+        }
       },
       title: {
         default: null,
@@ -222,26 +235,6 @@ export const TaskListNode = TaskList.extend({
       //    the task list.
       new Plugin({
         key: new PluginKey("task-list-state-management"),
-        view(view) {
-          const { tr } = view.state;
-          tr.doc.descendants((node, pos) => {
-            if (node.type.name === TaskList.name) {
-              tr.setNodeMarkup(pos, undefined, {
-                ...node.attrs,
-                stats: countCheckedItems(node)
-              });
-              return false;
-            }
-          });
-          tr.setMeta("preventUpdate", true);
-          tr.setMeta("addToHistory", false);
-          try {
-            view.dispatch(tr);
-          } catch (e) {
-            // ignore
-          }
-          return {};
-        },
         appendTransaction(transactions, oldState, newState) {
           if (!transactions[0].docChanged) return;