This commit is contained in:
fantasticit 2022-03-24 12:57:28 +08:00
parent c0533bb8f8
commit 938573d2b2
2 changed files with 18 additions and 10 deletions

View File

@ -29,10 +29,6 @@ const CustomTaskItem = BuiltInTaskItem.extend({
]; ];
}, },
// addNodeView() {
// return ReactNodeViewRenderer(TaskItemWrapper);
// },
addNodeView() { addNodeView() {
return ({ node, HTMLAttributes, getPos, editor }) => { return ({ node, HTMLAttributes, getPos, editor }) => {
const listItem = document.createElement('li'); const listItem = document.createElement('li');
@ -71,7 +67,6 @@ const CustomTaskItem = BuiltInTaskItem.extend({
return [ return [
new Plugin({ new Plugin({
props: { props: {
// @ts-ignore
handleClick: (view, pos, event) => { handleClick: (view, pos, event) => {
const state = view.state; const state = view.state;
const schema = state.schema; const schema = state.schema;
@ -82,14 +77,20 @@ const CustomTaskItem = BuiltInTaskItem.extend({
return node.type === schema.nodes.taskItem || node.type === schema.nodes.listItem; return node.type === schema.nodes.taskItem || node.type === schema.nodes.listItem;
}); });
if (!parentList) { if (!parentList) {
return; return false;
} }
const element = view.nodeDOM(parentList.pos) as HTMLLIElement; 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 parentElement = element.parentElement;
const type = parentElement && parentElement.getAttribute('data-type'); 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 tr = state.tr;
const nextValue = !(element.getAttribute('data-checked') === 'true'); const nextValue = !(element.getAttribute('data-checked') === 'true');
@ -97,6 +98,7 @@ const CustomTaskItem = BuiltInTaskItem.extend({
checked: nextValue, checked: nextValue,
}); });
view.dispatch(tr); view.dispatch(tr);
return true;
}, },
}, },
}), }),

View File

@ -176,12 +176,16 @@
} }
li { li {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 16px;
cursor: pointer; cursor: pointer;
> span { > span {
position: relative; position: absolute;
left: 0;
top: 6px;
display: block; display: block;
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -223,7 +227,9 @@
} }
> div { > div {
text-decoration: line-through; p {
text-decoration: line-through;
}
} }
} }
} }