Reverted serializeBlocksExternalHTML.ts

Author: matthewlipski

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

@@ -117,40 +117,28 @@ function serializeBlock<
   ].implementation.toExternalHTML({ ...block, props } as any, editor as any);
 
   const elementFragment = doc.createDocumentFragment();
-
-  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
-        );
-      }
+    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);
     }
 
-    addAttributesAndRemoveClasses(ret.dom.firstChild as HTMLElement);
+    addAttributesAndRemoveClasses(ret.dom.firstChild! as HTMLElement);
     elementFragment.append(...Array.from(ret.dom.childNodes));
   } else {
     elementFragment.append(ret.dom);
@@ -167,6 +155,13 @@ 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);
@@ -177,9 +172,6 @@ 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 data-start="2">
-    <p>Numbered List Item 1</p>
+  <li>
+    <p data-start="2">Numbered List Item 1</p>
   </li>
 </ol>
 <ul>
-  <li data-background-color="red">
-    <p>Bullet List Item 1</p>
+  <li>
+    <p data-background-color="red">Bullet List Item 1</p>
   </li>
-  <li data-checked="true">
-    <input type="checkbox" checked="" />
+  <li>
+    <input type="checkbox" checked="" data-checked="true" />
     <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 data-checked="true">
-    <input type="checkbox" checked="" />
+  <li>
+    <input type="checkbox" checked="" data-checked="true" />
     <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 data-checked="true">
-            <input type="checkbox" checked="" />
+          <li>
+            <input type="checkbox" checked="" data-checked="true" />
             <p class="bn-inline-content">Check List Item 2</p>
           </li>
         </ul>