diff --git a/packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts b/packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts index f8e87320e1..ef1eefb176 100644 --- a/packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts +++ b/packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts @@ -232,9 +232,7 @@ function serializeBlock< } fragment.append(list); } - const li = doc.createElement("li"); - li.append(elementFragment); - fragment.lastChild!.appendChild(li); + fragment.lastChild!.appendChild(elementFragment); } else { fragment.append(elementFragment); } diff --git a/packages/core/src/blocks/ListItem/BulletListItem/block.ts b/packages/core/src/blocks/ListItem/BulletListItem/block.ts index 81f81c3f9b..698bc8a828 100644 --- a/packages/core/src/blocks/ListItem/BulletListItem/block.ts +++ b/packages/core/src/blocks/ListItem/BulletListItem/block.ts @@ -65,12 +65,14 @@ export const createBulletListItemBlockSpec = createBlockSpec( }; }, toExternalHTML(block) { - const dom = document.createElement("p"); - addDefaultPropsExternalHTML(block.props, dom); + const li = document.createElement("li"); + const p = document.createElement("p"); + addDefaultPropsExternalHTML(block.props, li); + li.appendChild(p); return { - dom, - contentDOM: dom, + dom: li, + contentDOM: p, }; }, }, diff --git a/packages/core/src/blocks/ListItem/CheckListItem/block.ts b/packages/core/src/blocks/ListItem/CheckListItem/block.ts index f22ac051ca..af04233736 100644 --- a/packages/core/src/blocks/ListItem/CheckListItem/block.ts +++ b/packages/core/src/blocks/ListItem/CheckListItem/block.ts @@ -73,7 +73,7 @@ export const createCheckListItemBlockSpec = createBlockSpec( // into a single one so that ProseMirror can parse everything correctly. parseContent: ({ el, schema }) => getListItemContent(el, schema, "checkListItem"), - render(block) { + render(block, editor) { const dom = document.createDocumentFragment(); const checkbox = document.createElement("input"); checkbox.type = "checkbox"; @@ -81,6 +81,9 @@ export const createCheckListItemBlockSpec = createBlockSpec( if (block.props.checked) { checkbox.setAttribute("checked", ""); } + checkbox.addEventListener("change", () => { + editor.updateBlock(block, { props: { checked: !block.props.checked } }); + }); // We use a

tag, because for

  • tags we'd need a