fix: HTML export/parse round trip ignoring empty blocks (BLO-873)

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

@@ -265,15 +265,34 @@ function serializeBlock<
     }
   }
 
-  if (ret.contentDOM && block.content) {
-    const ic = serializeInlineContentExternalHTML(
-      editor,
-      block.content as any, // TODO
-      serializer,
-      { ...options, blockType: block.type },
-    );
+  if (ret.contentDOM) {
+    if (block.content) {
+      const ic = serializeInlineContentExternalHTML(
+        editor,
+        block.content as any, // TODO
+        serializer,
+        { ...options, blockType: block.type },
+      );
 
-    ret.contentDOM.appendChild(ic);
+      ret.contentDOM.appendChild(ic);
+    }
+
+    // Blocks with empty inline content (e.g. an empty paragraph) serialize to
+    // an element with no children (e.g. `<p></p>`), which is ignored when the
+    // HTML is parsed back into blocks. To make these blocks survive such a
+    // round trip, we fill their content with a non-breaking space.
+    //
+    // Only applies to blocks that hold inline content: containers (columns,
+    // tables) fill their `contentDOM` with child blocks later on, and code
+    // blocks would turn the placeholder into literal content.
+    const blockNodeType = editor.pmSchema.nodes[block.type as any];
+    if (
+      blockNodeType?.inlineContent &&
+      !blockNodeType.spec.code &&
+      ret.contentDOM.childNodes.length === 0
+    ) {
+      ret.contentDOM.appendChild(doc.createTextNode(" "));
+    }
   }
 
   let listType = undefined;

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/paragraph/emptyBetween.html

@@ -0,0 +1,25 @@
+<div class="bn-block-group" data-node-type="blockGroup">
+  <div class="bn-block-outer" data-node-type="blockOuter" data-id="1">
+    <div class="bn-block" data-node-type="blockContainer" data-id="1">
+      <div class="bn-block-content" data-content-type="paragraph">
+        <p class="bn-inline-content">Before</p>
+      </div>
+    </div>
+  </div>
+  <div class="bn-block-outer" data-node-type="blockOuter" data-id="2">
+    <div class="bn-block" data-node-type="blockContainer" data-id="2">
+      <div class="bn-block-content" data-content-type="paragraph">
+        <p class="bn-inline-content">
+          <span class="ProseMirror-trailingBreak" style="display: inline-block;"></span>
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="bn-block-outer" data-node-type="blockOuter" data-id="3">
+    <div class="bn-block" data-node-type="blockContainer" data-id="3">
+      <div class="bn-block-content" data-content-type="paragraph">
+        <p class="bn-inline-content">After</p>
+      </div>
+    </div>
+  </div>
+</div>

tests/src/unit/core/formatConversion/export/__snapshots__/html/complex/misc.html

@@ -13,6 +13,6 @@ <h2 style="background-color: rgb(221, 235, 241); color: rgb(223, 171, 1); text-a
 >Paragraph</p>
 <ul>
   <li data-nesting-level="1">
-    <p class="bn-inline-content"></p>
+    <p class="bn-inline-content">&nbsp;</p>
   </li>
 </ul>

tests/src/unit/core/formatConversion/export/__snapshots__/html/paragraph/empty.html

@@ -1 +1 @@
-<p></p>
+<p>&nbsp;</p>

tests/src/unit/core/formatConversion/export/__snapshots__/html/paragraph/emptyBetween.html

@@ -0,0 +1,3 @@
+<p>Before</p>
+<p>&nbsp;</p>
+<p>After</p>

tests/src/unit/core/formatConversion/export/__snapshots__/markdown/paragraph/emptyBetween.md

@@ -0,0 +1,5 @@
+Before
+
+
+
+After

tests/src/unit/core/formatConversion/export/__snapshots__/nodes/paragraph/emptyBetween.json

@@ -0,0 +1,62 @@
+[
+  {
+    "attrs": {
+      "id": "1",
+    },
+    "content": [
+      {
+        "attrs": {
+          "backgroundColor": "default",
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "content": [
+          {
+            "text": "Before",
+            "type": "text",
+          },
+        ],
+        "type": "paragraph",
+      },
+    ],
+    "type": "blockContainer",
+  },
+  {
+    "attrs": {
+      "id": "2",
+    },
+    "content": [
+      {
+        "attrs": {
+          "backgroundColor": "default",
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "type": "paragraph",
+      },
+    ],
+    "type": "blockContainer",
+  },
+  {
+    "attrs": {
+      "id": "3",
+    },
+    "content": [
+      {
+        "attrs": {
+          "backgroundColor": "default",
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "content": [
+          {
+            "text": "After",
+            "type": "text",
+          },
+        ],
+        "type": "paragraph",
+      },
+    ],
+    "type": "blockContainer",
+  },
+]

tests/src/unit/core/formatConversion/export/exportTestInstances.ts

@@ -29,6 +29,25 @@ export const exportTestInstancesBlockNoteHTML: TestInstance<
     },
     executeTest: testExportBlockNoteHTML,
   },
+  {
+    testCase: {
+      name: "paragraph/emptyBetween",
+      content: [
+        {
+          type: "paragraph",
+          content: "Before",
+        },
+        {
+          type: "paragraph",
+        },
+        {
+          type: "paragraph",
+          content: "After",
+        },
+      ],
+    },
+    executeTest: testExportBlockNoteHTML,
+  },
   {
     testCase: {
       name: "paragraph/basic",