From 29a461bf6cf6f5eb54d8c32dd253ac57c48369f6 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Mon, 9 May 2022 17:35:35 +0800
Subject: [PATCH] tiptap: fix click task list

---
 .../client/src/tiptap/core/extensions/selection.ts    |  8 ++++++--
 packages/client/src/tiptap/core/styles/list.scss      |  2 +-
 .../editor/collaboration/collaboration/editor.tsx     |  4 ++++
 packages/client/src/tiptap/prose-utils/node.ts        | 11 +++++++++++
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/tiptap/core/extensions/selection.ts b/packages/client/src/tiptap/core/extensions/selection.ts
index e612c903..b9dc1f77 100644
--- a/packages/client/src/tiptap/core/extensions/selection.ts
+++ b/packages/client/src/tiptap/core/extensions/selection.ts
@@ -1,7 +1,7 @@
 import { Extension } from '@tiptap/core';
 import { Plugin, PluginKey, NodeSelection, TextSelection, Selection, AllSelection } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
-import { getCurrentNode, isInCodeBlock, isInCallout } from 'tiptap/prose-utils';
+import { getCurrentNode, isInCodeBlock, isInCallout, getNodeAtPos, isTodoListNode } from 'tiptap/prose-utils';
 import { EXTENSION_PRIORITY_HIGHEST } from 'tiptap/core/constants';
 
 export const selectionPluginKey = new PluginKey('selection');
@@ -108,7 +108,11 @@ export const SelectionExtension = Extension.create({
         key: new PluginKey('preventSelection'),
         props: {
           // 禁止非可编辑用户选中
-          handleClick(_, __, event) {
+          handleClick(view, pos, event) {
+            if (isTodoListNode(getNodeAtPos(view.state, pos))) {
+              return false;
+            }
+
             if (!isEditable) {
               event.preventDefault();
               return true;
diff --git a/packages/client/src/tiptap/core/styles/list.scss b/packages/client/src/tiptap/core/styles/list.scss
index 178473b8..da410d4e 100644
--- a/packages/client/src/tiptap/core/styles/list.scss
+++ b/packages/client/src/tiptap/core/styles/list.scss
@@ -54,7 +54,7 @@
 
       > span {
         position: absolute;
-        top: 6px;
+        top: 3px;
         left: 0;
         display: block;
         width: 16px;
diff --git a/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx b/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx
index 4f890396..d18e3284 100644
--- a/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx
+++ b/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx
@@ -35,6 +35,10 @@ export const EditorInstance = forwardRef((props: IProps, ref) => {
   const editor = useEditor(
     {
       editable,
+      editorProps: {
+        // @ts-ignore
+        taskItemClickable: true,
+      },
       extensions: [
         ...CollaborationKit,
         Collaboration.configure({
diff --git a/packages/client/src/tiptap/prose-utils/node.ts b/packages/client/src/tiptap/prose-utils/node.ts
index b994a178..a4b2812c 100644
--- a/packages/client/src/tiptap/prose-utils/node.ts
+++ b/packages/client/src/tiptap/prose-utils/node.ts
@@ -32,6 +32,17 @@ export function getCurrentNode(state: EditorState): Node {
   return node;
 }
 
+export function getNodeAtPos(state: EditorState, pos: number): Node {
+  const $head = state.doc.resolve(pos);
+  let node = null;
+
+  for (let d = $head.depth; d > 0; d--) {
+    node = $head.node(d);
+  }
+
+  return node;
+}
+
 export function isInCustomNode(state: EditorState, nodeName: string): boolean {
   if (!state.schema.nodes[nodeName]) return false;