Fixed list item props in external HTML

Author: matthewlipski

packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts

@@ -117,28 +117,40 @@ function serializeBlock<
   ].implementation.toExternalHTML({ ...block, props } as any, editor as any);
 
   const elementFragment = doc.createDocumentFragment();
-  if (ret.dom.classList.contains("bn-block-content")) {
-    const blockContentDataAttributes = [
-      ...attrs,
-      ...Array.from(ret.dom.attributes),
-    ].filter(
-      (attr) =>
-        attr.name.startsWith("data") &&
-        attr.name !== "data-content-type" &&
-        attr.name !== "data-file-block" &&
-        attr.name !== "data-node-view-wrapper" &&
-        attr.name !== "data-node-type" &&
-        attr.name !== "data-id" &&
-        attr.name !== "data-index" &&
-        attr.name !== "data-editable"
-    );
 
-    // ret.dom = ret.dom.firstChild! as any;
-    for (const attr of blockContentDataAttributes) {
-      (ret.dom.firstChild! as HTMLElement).setAttribute(attr.name, attr.value);
+  let listType = undefined;
+  if (orderedListItemBlockTypes.has(block.type!)) {
+    listType = "OL";
+  } else if (unorderedListItemBlockTypes.has(block.type!)) {
+    listType = "UL";
+  }
+
+  const blockContentDataAttributes = [
+    ...attrs,
+    ...Array.from(ret.dom.attributes),
+  ].filter(
+    (attr) =>
+      attr.name.startsWith("data") &&
+      attr.name !== "data-content-type" &&
+      attr.name !== "data-file-block" &&
+      attr.name !== "data-node-view-wrapper" &&
+      attr.name !== "data-node-type" &&
+      attr.name !== "data-id" &&
+      attr.name !== "data-index" &&
+      attr.name !== "data-editable"
+  );
+
+  if (ret.dom.classList.contains("bn-block-content")) {
+    if (!listType) {
+      for (const attr of blockContentDataAttributes) {
+        (ret.dom.firstChild! as HTMLElement).setAttribute(
+          attr.name,
+          attr.value
+        );
+      }
     }
 
-    addAttributesAndRemoveClasses(ret.dom.firstChild! as HTMLElement);
+    addAttributesAndRemoveClasses(ret.dom.firstChild as HTMLElement);
     elementFragment.append(...Array.from(ret.dom.childNodes));
   } else {
     elementFragment.append(ret.dom);
@@ -155,13 +167,6 @@ function serializeBlock<
     ret.contentDOM.appendChild(ic);
   }
 
-  let listType = undefined;
-  if (orderedListItemBlockTypes.has(block.type!)) {
-    listType = "OL";
-  } else if (unorderedListItemBlockTypes.has(block.type!)) {
-    listType = "UL";
-  }
-
   if (listType) {
     if (fragment.lastChild?.nodeName !== listType) {
       const list = doc.createElement(listType);
@@ -172,6 +177,9 @@ function serializeBlock<
       fragment.append(list);
     }
     const li = doc.createElement("li");
+    for (const attr of blockContentDataAttributes) {
+      li.setAttribute(attr.name, attr.value);
+    }
     li.append(elementFragment);
     fragment.lastChild!.appendChild(li);
   } else {

tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocksWithProps.html

@@ -1,16 +1,16 @@
 <p data-text-color="red">Paragraph 1</p>
 <h2 data-level="2">Heading 1</h2>
 <ol start="2">
-  <li>
-    <p data-start="2">Numbered List Item 1</p>
+  <li data-start="2">
+    <p>Numbered List Item 1</p>
   </li>
 </ol>
 <ul>
-  <li>
-    <p data-background-color="red">Bullet List Item 1</p>
+  <li data-background-color="red">
+    <p>Bullet List Item 1</p>
   </li>
-  <li>
-    <input type="checkbox" checked="" data-checked="true" />
+  <li data-checked="true">
+    <input type="checkbox" checked="" />
     <p class="bn-inline-content">Check List Item 1</p>
   </li>
 </ul>

tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/basic.html

@@ -19,8 +19,8 @@
     <input type="checkbox" />
     <p class="bn-inline-content">Check List Item 1</p>
   </li>
-  <li>
-    <input type="checkbox" checked="" data-checked="true" />
+  <li data-checked="true">
+    <input type="checkbox" checked="" />
     <p class="bn-inline-content">Check List Item 2</p>
   </li>
 </ul>

tests/src/unit/core/formatConversion/export/__snapshots__/html/lists/nested.html

@@ -15,8 +15,8 @@
             <input type="checkbox" />
             <p class="bn-inline-content">Check List Item 1</p>
           </li>
-          <li>
-            <input type="checkbox" checked="" data-checked="true" />
+          <li data-checked="true">
+            <input type="checkbox" checked="" />
             <p class="bn-inline-content">Check List Item 2</p>
           </li>
         </ul>