test: add test case for exporting custom block (#2150)

Author: nperez0111

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/custom-blocks/simpleCustomParagraph.html

@@ -0,0 +1,9 @@
+<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="simpleCustomParagraph">
+        <p class="bn-inline-content simple-custom-paragraph">Simple Custom Paragraph</p>
+      </div>
+    </div>
+  </div>
+</div>

tests/src/unit/core/formatConversion/export/__snapshots__/html/custom-blocks/simpleCustomParagraph.html

@@ -0,0 +1 @@
+<p class="simple-custom-paragraph">Simple Custom Paragraph</p>

tests/src/unit/core/formatConversion/export/__snapshots__/markdown/custom-blocks/simpleCustomParagraph.md

@@ -0,0 +1 @@
+Simple Custom Paragraph

tests/src/unit/core/formatConversion/export/__snapshots__/nodes/custom-blocks/simpleCustomParagraph.json

@@ -0,0 +1,24 @@
+[
+  {
+    "attrs": {
+      "id": "1",
+    },
+    "content": [
+      {
+        "attrs": {
+          "backgroundColor": "default",
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "content": [
+          {
+            "text": "Simple Custom Paragraph",
+            "type": "text",
+          },
+        ],
+        "type": "simpleCustomParagraph",
+      },
+    ],
+    "type": "blockContainer",
+  },
+]

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

@@ -1717,6 +1717,18 @@ export const exportTestInstancesBlockNoteHTML: TestInstance<
     },
     executeTest: testExportBlockNoteHTML,
   },
+  {
+    testCase: {
+      name: "custom-blocks/simpleCustomParagraph",
+      content: [
+        {
+          type: "simpleCustomParagraph",
+          content: "Simple Custom Paragraph",
+        },
+      ],
+    },
+    executeTest: testExportBlockNoteHTML,
+  },
 ];
 
 export const exportTestInstancesHTML: TestInstance<

tests/src/unit/core/schema/__snapshots__/blocks.json

@@ -242,6 +242,7 @@
     "extensions": undefined,
     "implementation": {
       "node": null,
+      "parse": [Function],
       "render": [Function],
       "toExternalHTML": [Function],
     },

tests/src/unit/core/testSchema.ts

@@ -1,25 +1,30 @@
 import {
   BlockNoteSchema,
-  addNodeAndExtensionsToSpec,
+  createBlockConfig,
+  createBlockSpec,
   createImageBlockConfig,
   createImageBlockSpec,
   createInlineContentSpec,
   createPageBreakBlockSpec,
   createStyleSpec,
   defaultProps,
+  parseDefaultProps,
 } from "@blocknote/core";
 
 // BLOCKS ----------------------------------------------------------------------
 
 // This is a modified version of the default image block that does not implement
 // a `toExternalHTML` function. It's used to test if the custom serializer by
 // default serializes custom blocks using their `render` function.
-const SimpleImage = addNodeAndExtensionsToSpec(
-  {
-    type: "simpleImage",
-    propSchema: createImageBlockConfig({}).propSchema,
-    content: "none",
-  },
+const SimpleImage = createBlockSpec(
+  createBlockConfig(
+    () =>
+      ({
+        type: "simpleImage",
+        propSchema: createImageBlockConfig({}).propSchema,
+        content: "none",
+      }) as const,
+  ),
   {
     render(block, editor) {
       return createImageBlockSpec().implementation.render.call(
@@ -31,13 +36,27 @@ const SimpleImage = addNodeAndExtensionsToSpec(
   },
 );
 
-const CustomParagraph = addNodeAndExtensionsToSpec(
-  {
-    type: "customParagraph",
-    propSchema: defaultProps,
-    content: "inline",
-  },
+const CustomParagraph = createBlockSpec(
+  createBlockConfig(
+    () =>
+      ({
+        type: "customParagraph",
+        propSchema: defaultProps,
+        content: "inline",
+      }) as const,
+  ),
   {
+    parse: (e) => {
+      if (e.tagName !== "P") {
+        return undefined;
+      }
+
+      if (e.classList.contains("custom-paragraph")) {
+        return parseDefaultProps(e);
+      }
+
+      return undefined;
+    },
     render: () => {
       const paragraph = document.createElement("p");
       paragraph.className = "custom-paragraph";
@@ -50,7 +69,6 @@ const CustomParagraph = addNodeAndExtensionsToSpec(
     toExternalHTML: () => {
       const paragraph = document.createElement("p");
       paragraph.className = "custom-paragraph";
-      paragraph.innerHTML = "Hello World";
 
       return {
         dom: paragraph,
@@ -59,12 +77,15 @@ const CustomParagraph = addNodeAndExtensionsToSpec(
   },
 );
 
-const SimpleCustomParagraph = addNodeAndExtensionsToSpec(
-  {
-    type: "simpleCustomParagraph",
-    propSchema: defaultProps,
-    content: "inline",
-  },
+const SimpleCustomParagraph = createBlockSpec(
+  createBlockConfig(
+    () =>
+      ({
+        type: "simpleCustomParagraph",
+        propSchema: defaultProps,
+        content: "inline",
+      }) as const,
+  ),
   {
     render: () => {
       const paragraph = document.createElement("p");
@@ -198,9 +219,9 @@ const FontSize = createStyleSpec(
 export const testSchema = BlockNoteSchema.create().extend({
   blockSpecs: {
     pageBreak: createPageBreakBlockSpec(),
-    customParagraph: CustomParagraph,
-    simpleCustomParagraph: SimpleCustomParagraph,
-    simpleImage: SimpleImage,
+    customParagraph: CustomParagraph(),
+    simpleCustomParagraph: SimpleCustomParagraph(),
+    simpleImage: SimpleImage(),
   },
   inlineContentSpecs: {
     mention: Mention,