deserializeHTMLToDocumentFragment and serializeHTMLFromNodes don't successfully rebuild taskLists

[bensquire]

Description

serializeHTMLFromNodes and deserializeHTMLToDocumentFragment don't restore taskLists into a structure that plate can interpret.

Input Structure in plate syntax:

[
    {
        "type": "action_item",
        "children": [
            {
                "text": "Hello"
            }
        ],
        "checked": true
    }
]

Input structure converted to HTML (using serializeHTMLFromNodes and formatting added):

<div class="slate-TodoListElement slate-TodoListElement-rootChecked">
   <div contenteditable="false" class="slate-TodoListElement-checkboxWrapper"><input type="checkbox" class="slate-TodoListElement-checkbox" checked=""/></div>
   <span class="slate-TodoListElement-text" contenteditable="true">Hello</span>
</div>

Restored Structure (deserializeHTMLToDocumentFragment):

[
    {
        "text": "   "
    },
    {
        "text": "   "
    },
    {
        "text": "Hello"
    }
]

Steps

1. Use an editor to create a taskList
2. Convert the plate syntax to HTML using serializeHTMLFromNodes
3. Convert the HTML back to plate syntax using deserializeHTMLToDocumentFragment
4. Feed back into editor
5. The taskLists wont render

Sandbox

example

Expectation

To be able to convert/reconvert content between the 2 formats and have it return to it's original state (or at least render in the same way).

Environment

• slate:
• slate-react:
• browser: chrome