How to integrate task-list/task-item with starter-kit?

[rfgamaral]

The official example for Tasks is a basic editor that pretty much only allows a task list, and that's it.

I'm trying to integrate the task-list and task-item extensions with starter-kit so that I can have a complete text editor with tasks, but it's not working. Not sure what I'm missing here...

Please take a look at this CodeSandbox, and look for the line withTasklistExtension = false (around line 48). Change that to true, and observe the output on the right. The whole thing was turned into a task list.

Thoughts on how to fix this?

[philippkuehn]

Removing these lines should fix your issue:

Document.extend({
  content: 'taskList',
}),

With this code you define that there can only be one tasklist in your document.

[rfgamaral]

@philippkuehn Tried that, but when I type [ ] in the editor, a checkbox does not appear.

[philippkuehn]

the first one seems to be an issue, you are right. but the second one works as expected. there are just some missing styles you have to add.

[rfgamaral]

I've updated the styles in both examples. The first one still has the same issue, the second one now looks better but exhibits a different issue, not sure if related to the first one:

2021-10-12.11-47-27.mp4

[philippkuehn]

I'm not sure what’s the issue here. As I described above it’s expected bahavior that a task item can contain more than a single line of text by default. It’s the same behavior for list items in bullet lists and ordered lists.

[philippkuehn]

You can set content for list items to block or paragraph instead.

[rfgamaral]

Thank you, @philippkuehn. I'm going to open up a new issue about the one you mentioned it's a bug.

[rfgamaral]

@philippkuehn

the first one seems to be an issue, you are right. but the second one works as expected. there are just some missing styles you have to add.

Actually, about this, it might not be a bug after all... I mean, I was trying to add a task item to a paragraph, which was not supported by content: 'inline*'. Removing that made it work, because this is what we have in the TaskItem extension:

content() {
    return this.options.nested ? 'paragraph block*' : 'paragraph+'
},

Basically, paragraph needs to be added to the content property. So, in conclusion, I'm now using nested: true, which mostly works, here's the updated demo, for reference.