search

ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
26.78k stars 2.24k forks source link

[Bug]: Calling `editor.commands.setContent` may not update checkbox state #5297

Open fongandrew opened 2 months ago

fongandrew commented 2 months ago

Affected Packages

extension-task-item

Version(s)

2.5.0-beta.6

Bug Description

Updating a tasklist item programatically via editor.commands.setContent may not work as expected after the user has interacted with the checkbox.

Repro steps

  1. Create a task list item
  2. Check the item
  3. Programatically update the content to uncheck it. For example:
editor.commands.setContent({"type":"doc","content":[{"type":"taskList","content":[{"type":"taskItem","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"type":"text","text":"TODO"}]}]}]}]})

The checkbox will visually remain checked, although subsequent calls to editor.getJSON() correctly reports new updated state.

Browser Used

Chrome

Code Example URL

https://codesandbox.io/p/sandbox/divine-surf-5gyhch

Expected Behavior

In Sandbox, checking the task list checkbox should not affect subsequent attempts to programatically update the item.

Additional Context (Optional)

No response

Dependency Updates

fongandrew commented 2 months ago

The issue is probably this: https://github.com/ueberdosis/tiptap/blob/dbc0f0941493d16a374097d3652ff098a318e985/packages/extension-task-item/src/task-item.ts#L197-L201

Calling .setAttribute('checked', 'checked') is different that updating the checked property (.checked = true). The property is what the user actually sees and setting the attribute rather than the property can result in the two getting out of sync.