fix(task-item): fix updating checked status

[nicksellen]

Changes Overview

The code currently uses setAttribute / removeAttribute to update the checked status of the checkbox, this is the incorrect method to use. Checkboxes have a checked property that can be set.

See https://aileenrae.co.uk/blog/programatically-check-uncheck-checkbox-javascript/

Implementation Approach

Switch to setting checkbox.checked property

Testing Done

Manually in browser.

Verification Steps

Open a collaborative session with task item extension available.

In one window check/uncheck the box a few times, then in the other window do the same.

Notice that the update appears to no longer propagate, the checkbox state does not change in the other window.

It is actually changing the attribute on the document node correctly, which you can see if have styling applied such as this (on the task item):

li[data-checked='true'] {
    text-decoration: line-through;
}

With the fix, it works again!

Additional Notes

Checklist

• I have created a changeset for this PR if necessary.
• My changes do not break the library.
• I have added tests where applicable.
• I have followed the project guidelines.
• I have fixed any lint issues.

Related Issues

I couldn't find an existing issue for it, which I thought was surprising, but maybe I didn't look well enough.

[netlify]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	1eabfc4
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/67728d1dbc5f9e0008281ec0
😎 Deploy Preview	https://deploy-preview-5953--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1eabfc4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 54 packages

Name	Type
@tiptap/extension-task-item	Patch
@tiptap/core	Patch
@tiptap/extension-blockquote	Patch
@tiptap/extension-bold	Patch
@tiptap/extension-bubble-menu	Patch
@tiptap/extension-bullet-list	Patch
@tiptap/extension-character-count	Patch
@tiptap/extension-code-block-lowlight	Patch
@tiptap/extension-code-block	Patch
@tiptap/extension-code	Patch
@tiptap/extension-collaboration-cursor	Patch
@tiptap/extension-collaboration	Patch
@tiptap/extension-color	Patch
@tiptap/extension-document	Patch
@tiptap/extension-dropcursor	Patch
@tiptap/extension-floating-menu	Patch
@tiptap/extension-focus	Patch
@tiptap/extension-font-family	Patch
@tiptap/extension-gapcursor	Patch
@tiptap/extension-hard-break	Patch
@tiptap/extension-heading	Patch
@tiptap/extension-highlight	Patch
@tiptap/extension-history	Patch
@tiptap/extension-horizontal-rule	Patch
@tiptap/extension-image	Patch
@tiptap/extension-italic	Patch
@tiptap/extension-link	Patch
@tiptap/extension-list-item	Patch
@tiptap/extension-list-keymap	Patch
@tiptap/extension-mention	Patch
@tiptap/extension-ordered-list	Patch
@tiptap/extension-paragraph	Patch
@tiptap/extension-placeholder	Patch
@tiptap/extension-strike	Patch
@tiptap/extension-subscript	Patch
@tiptap/extension-superscript	Patch
@tiptap/extension-table-cell	Patch
@tiptap/extension-table-header	Patch
@tiptap/extension-table-row	Patch
@tiptap/extension-table	Patch
@tiptap/extension-task-list	Patch
@tiptap/extension-text-align	Patch
@tiptap/extension-text-style	Patch
@tiptap/extension-text	Patch
@tiptap/extension-typography	Patch
@tiptap/extension-underline	Patch
@tiptap/extension-youtube	Patch
@tiptap/html	Patch
@tiptap/pm	Patch
@tiptap/react	Patch
@tiptap/starter-kit	Patch
@tiptap/suggestion	Patch
@tiptap/vue-2	Patch
@tiptap/vue-3	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[nperez0111]

Thanks for the fix, looks like we were setting this inconsistently (using checked in some places and setting the attribute in others).

I've updated this to now only ever use the checked property