diff --git a/packages/client/src/components/tiptap/extensions/taskItem.ts b/packages/client/src/components/tiptap/extensions/taskItem.ts index f5450286..36bd5403 100644 --- a/packages/client/src/components/tiptap/extensions/taskItem.ts +++ b/packages/client/src/components/tiptap/extensions/taskItem.ts @@ -29,10 +29,6 @@ const CustomTaskItem = BuiltInTaskItem.extend({ ]; }, - // addNodeView() { - // return ReactNodeViewRenderer(TaskItemWrapper); - // }, - addNodeView() { return ({ node, HTMLAttributes, getPos, editor }) => { const listItem = document.createElement('li'); @@ -71,7 +67,6 @@ const CustomTaskItem = BuiltInTaskItem.extend({ return [ new Plugin({ props: { - // @ts-ignore handleClick: (view, pos, event) => { const state = view.state; const schema = state.schema; @@ -82,14 +77,20 @@ const CustomTaskItem = BuiltInTaskItem.extend({ return node.type === schema.nodes.taskItem || node.type === schema.nodes.listItem; }); if (!parentList) { - return; + return false; } const element = view.nodeDOM(parentList.pos) as HTMLLIElement; - if (element.tagName.toLowerCase() !== 'li') return; + if (element.tagName.toLowerCase() !== 'li') return false; + + // 编辑模式:仅当点击 SPAN 时进行状态修改 + if (view.editable) { + const target = event.target as HTMLElement; + if (target.tagName.toLowerCase() !== 'span') return false; + } const parentElement = element.parentElement; const type = parentElement && parentElement.getAttribute('data-type'); - if (!type || type.toLowerCase() !== 'tasklist') return; + if (!type || type.toLowerCase() !== 'tasklist') return false; const tr = state.tr; const nextValue = !(element.getAttribute('data-checked') === 'true'); @@ -97,6 +98,7 @@ const CustomTaskItem = BuiltInTaskItem.extend({ checked: nextValue, }); view.dispatch(tr); + return true; }, }, }), diff --git a/packages/client/src/styles/prosemirror.scss b/packages/client/src/styles/prosemirror.scss index 6eaad4ae..61de7c8b 100644 --- a/packages/client/src/styles/prosemirror.scss +++ b/packages/client/src/styles/prosemirror.scss @@ -176,12 +176,16 @@ } li { + position: relative; display: flex; align-items: center; + padding-left: 16px; cursor: pointer; > span { - position: relative; + position: absolute; + left: 0; + top: 6px; display: block; width: 16px; height: 16px; @@ -223,7 +227,9 @@ } > div { - text-decoration: line-through; + p { + text-decoration: line-through; + } } } }