[Bug]: Better HTML output for task item?

[codemzy]

Which packages did you experience the bug in?

extension-task-item

What Tiptap version are you using?

2.1.15

What’s the bug you are facing?

It's not strictly a bug but possibly an improvement suggestion for the HTML output of the task item?

The output for the task item doesn't match the parse input and results in quite a bit of extra markup in saved HTML. The input for a task item is:

<li data-type="taskItem" data-checked="true">A list item</li>

But then the HTML output (for saving) is:

<li data-checked="true" data-type="taskItem"><label><input type="checkbox" checked="checked"><span></span></label><div><p>A list item</p></div></li>

What browser are you using?

Chrome

Code example

No response

What did you expect to happen?

I would expect the extra markup to be removed in the output HTML, and the output to match the input. Since it's a node view as described in the docs the output can be simple.

Anything to add? (optional)

I created a custom renderHTML which makes the output match the input and seems to work well.

// fixes output to match input
export const CustomTaskItem = TaskItem.extend({
    renderHTML({ HTMLAttributes }) {
        return ['li', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { 'data-type': this.name }), 0];
    },
});

Just stores in HTML the info needed to restore the content, rather than the extra divs, label and input elements etc.

Now the output is cleaner and works the same (since the node view adds the markup in the editor):

<li data-checked="true" data-type="taskItem"><p>A list item</p></li>

Let me know what you think!

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖