Help with custom checkbox list

1

Hey everyone.

I’m pretty new to ProseMirror and I’ve hit a roadblock trying to make a fairly simple editor. I’ve made a little demo of what I’ve been able to do, which is a first line heading, followed by any number of lines and/or item lists.

I’m trying to make it work such that when you type “[]” at the start of a line, it converts into a list, and I think I have that working. However, when you press enter, it doesn’t enter a new “item” and I’m not sure how to make that work.

Does anyone have any pointers?

Here’s a working demo of my current attempt: https://glitch.com/edit/#!/gold-grand-robe

Thanks!

2

Two problems: you want to put your enterMap before the base keymap in the array of plugins, so that it gets a chance to handle enter before the default binding, and you need to pass schema.nodes.task, not schema.nodes.task_list to splitListItem.

3

Thank you so much for the help @marijn.

I really appreciate you taking the time to answer so many questions for folks here (I’ve read through so many posts before making my own).

That’s now doing exactly what I need :pray:.

4

My next issue is that after calling splitListItem, the new item has inherited the attributes from the current element (seems reasonable).

However, as it’s a checkbox, I’d like to reset the data-done attribute on the newly added <li>. How can I do that? It doesn’t look like it’s possible to pass new attributes to splitListItem, and I’m not sure where the hook point is to access the new item and update its attributes right after it’s created.

5

The easiest way forward is probably to create a copy of splitListItem's code in your own codebase, and adjust it for your use case.

6

I’ve given that a shot, but it’s not having the effect I was hoping.

I’ve taken splitListItem and updated line line:

let types = nextType && [null, { type: nextType }];

to:

let types = nextType && [null, { type: nextType, attrs: { done: false } }];

Which is then passed into the internal split call. I was hoping this would add the new attributes to the split item, but if I check the checkbox and then add a new one, the new one remains checked.

Any idea what I’m overlooking?

Thanks!

7

I believe nextType is the inner type (probably a paragraph) there. What you want is to replace the null with something like {type: itemType}.