ckeditor
Todolist lost checked property when reload or set to Source Editing
📝 Provide detailed reproduction steps (if any)
When I add todolist to a table cell, I checked the checkbox, and saved the data to server, when I reload the data, the checkbox's checked status is lost.
Before:
Reload:
Below is my source code, you can copy the code to source editing, the checked="checked" status will be lost
<html><head></head><body>
<figure class="table">
<table>
<tbody>
<tr>
<td style="background-color:hsl(60, 75%, 60%);text-align:center;">
<p style="color:#7F6000;font-family:Calibri;font-size:12.0pt;margin:0in;">
<span style="color:hsl(0,0%,0%);"><strong>FOUNDATION</strong></span>
</p>
</td>
</tr>
<tr>
<td style="vertical-align:top;">
<ul class="todo-list">
<li>
<label class="todo-list__label todo-list__label_without-description"><input type="checkbox" checked="checked" disabled="disabled"></label>
<p style="font-family:Calibri;font-size:12.0pt;margin:0in;">
<strong>Net Worth: </strong>
</p>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</figure>
</body></html>
✔️ Expected result
Checked status can reload correctly
❌ Actual result
Checked status is lost.
❓ Possible solution
📃 Other details
- Browser: Latest Chrome
- OS: MacOS / Windows
- First affected CKEditor version: Latest ckeditor version
- Installed CKEditor plugins: "@ckeditor/ckeditor5-alignment": "^40.0.0", "@ckeditor/ckeditor5-autoformat": "^40.0.0", "@ckeditor/ckeditor5-basic-styles": "^40.0.0", "@ckeditor/ckeditor5-block-quote": "^40.0.0", "@ckeditor/ckeditor5-cloud-services": "^40.0.0", "@ckeditor/ckeditor5-dev-translations": "^32.1.2", "@ckeditor/ckeditor5-dev-utils": "^32.1.2", "@ckeditor/ckeditor5-editor-classic": "^40.0.0", "@ckeditor/ckeditor5-editor-inline": "^40.0.0", "@ckeditor/ckeditor5-essentials": "^40.0.0", "@ckeditor/ckeditor5-font": "^40.0.0", "@ckeditor/ckeditor5-heading": "^40.0.0", "@ckeditor/ckeditor5-horizontal-line": "^40.0.0", "@ckeditor/ckeditor5-html-support": "^40.0.0", "@ckeditor/ckeditor5-image": "^40.0.0", "@ckeditor/ckeditor5-indent": "^40.0.0", "@ckeditor/ckeditor5-link": "^40.0.0", "@ckeditor/ckeditor5-list": "^40.0.0", "@ckeditor/ckeditor5-media-embed": "^40.0.0", "@ckeditor/ckeditor5-mention": "^40.0.0", "@ckeditor/ckeditor5-page-break": "^40.0.0", "@ckeditor/ckeditor5-paragraph": "^40.0.0", "@ckeditor/ckeditor5-paste-from-office": "^40.0.0", "@ckeditor/ckeditor5-source-editing": "^40.0.0", "@ckeditor/ckeditor5-special-characters": "^40.0.0", "@ckeditor/ckeditor5-table": "^40.0.0", "@ckeditor/ckeditor5-theme-lark": "^40.0.0", "@ckeditor/ckeditor5-typing": "^40.0.0", "@ckeditor/ckeditor5-word-count": "^40.0.0", "@ckeditor/ckeditor5-ui": "^40.0.0", "@ckeditor/ckeditor5-undo": "^40.0.0",
If you'd like to see this fixed sooner, add a 👍 reaction to this post.
Simplest reproduction (with GHS enabled):
<ul class="todo-list">
<li>
<label class="todo-list__label todo-list__label_without-description"><input type="checkbox" checked="checked" disabled="disabled"></label>
<p class="foo">
foobar
</p>
</li>
</ul>
Also reproducible when changing the alignment on an item in a todo list. Steps to repro:
- Create an item in a todo list
- Change its alignment, e.g. by centering the text
- Check the item on the todo list
- Execute
editor.setData(editor.getData())
It seems that the checked="checked" attribute goes missing when the text inside the <li> gets wrapped in an additional element, e.g. <p>.
Any update? Our clients report this issue again, I think it's an very important function.
@niegowski @Witoso @mabryl Is there any way to avoid it? Too many of our users have encountered this problem.
As I see it doesn't work with p element, while with span everything works fine (GHS is not required to check it):
<ul class="todo-list">
<li>
<label class="todo-list__label todo-list__label_without-description"><input type="checkbox" checked="checked" disabled="disabled"></label>
<span class="foo">
foobar
</span>
</li>
</ul>
So conversion treats todo list with p element a little bit differently.
This method override data.modelCursor: https://github.com/ckeditor/ckeditor5/blob/28d0389424dcb74d1163741d33a379e26816fc4c/packages/ckeditor5-engine/src/conversion/upcastdispatcher.ts#L351-L379
Inside modelCursor we could find an array with 3 elements (first and third elements are empty so they will be removed but they have actual attribute which is responsible for checked property while second doesn't have that attribute but have the text node)
First element:
Second element:
Third element:
Meanwhile todo list item with span element have only 1 (with text and attributes), not 3:
Here is a method which remove empty elements (so only second element with text data from the array is left but it doesn't have todo-list-checked attribute) so that the reason of data lost: https://github.com/ckeditor/ckeditor5/blob/28d0389424dcb74d1163741d33a379e26816fc4c/packages/ckeditor5-engine/src/conversion/upcastdispatcher.ts#L500-L516
Here is example solution: https://github.com/ckeditor/ckeditor5/pull/16785