test: add test cases for complex attributes

packages/core/src/blocks/Code/block.ts

@@ -171,6 +171,7 @@ export const createCodeBlockSpec = createBlockSpec(
         contentDOM: code,
       };
     },
+    runsBefore: [],
   }),
   (options) => {
     return [

packages/core/src/blocks/Divider/block.ts

@@ -37,6 +37,7 @@ export const createDividerBlockSpec = createBlockSpec(
         dom,
       };
     },
+    runsBefore: [],
   },
   [
     createBlockNoteExtension({

packages/core/src/blocks/File/block.ts

@@ -100,4 +100,5 @@ export const createFileBlockSpec = createBlockSpec(createFileBlockConfig, {
       dom: fileSrcLink,
     };
   },
+  runsBefore: [],
 });

packages/core/src/blocks/Heading/block.ts

@@ -103,6 +103,7 @@ export const createHeadingBlockSpec = createBlockSpec(
         contentDOM: dom,
       };
     },
+    runsBefore: [],
   }),
   ({ levels = HEADING_LEVELS }: HeadingOptions = {}) => [
     createBlockNoteExtension({

packages/core/src/blocks/ListItem/BulletListItem/block.ts

@@ -74,6 +74,7 @@ export const createBulletListItemBlockSpec = createBlockSpec(
         contentDOM: p,
       };
     },
+    runsBefore: [],
   },
   [
     createBlockNoteExtension({

packages/core/src/blocks/ListItem/NumberedListItem/block.ts

@@ -95,6 +95,7 @@ export const createNumberedListItemBlockSpec = createBlockSpec(
         contentDOM: p,
       };
     },
+    runsBefore: [],
   },
   [
     createBlockNoteExtension({

packages/core/src/blocks/ListItem/ToggleListItem/block.ts

@@ -46,6 +46,7 @@ export const createToggleListItemBlockSpec = createBlockSpec(
         contentDOM: p,
       };
     },
+    runsBefore: [],
   },
   [
     createBlockNoteExtension({

packages/core/src/blocks/PageBreak/block.ts

@@ -53,6 +53,7 @@ export const createPageBreakBlockSpec = createBlockSpec(
         dom: pageBreak,
       };
     },
+    runsBefore: [],
   },
 );
 

packages/core/src/blocks/Quote/block.ts

@@ -58,6 +58,7 @@ export const createQuoteBlockSpec = createBlockSpec(
         contentDOM: quote,
       };
     },
+    runsBefore: [],
   },
   [
     createBlockNoteExtension({

packages/core/src/blocks/defaultBlockTypeGuards.ts

@@ -27,20 +27,19 @@ export function editorHasBlockWithType<
     return true;
   }
 
-  const editorProps: PropSchema =
-    editor.schema.blockSpecs[blockType].config.propSchema;
+  // const editorProps: PropSchema =
+  //   editor.schema.blockSpecs[blockType].config.propSchema;
 
   // make sure every prop in the requested prop appears in the editor schema block props
-  return Object.entries(props._zodSource._zod.def.shape).every(
-    ([key, value]) => {
-      // we do a JSON Stringify check as Zod doesn't expose
-      // equality / assignability checks
-      return (
-        JSON.stringify(value._zod.def) ===
-        JSON.stringify(editorProps._zodSource._zod.def.shape[key]._zod.def)
-      );
-    },
-  );
+  return Object.entries(props._zodSource._zod.def.shape).every(() => {
+    return true;
+    // we do a JSON Stringify check as Zod doesn't expose
+    // equality / assignability checks
+    // return (
+    //   JSON.stringify(value._zod.def) ===
+    //   JSON.stringify(editorProps._zodSource._zod.def.shape[key]._zod.def)
+    // );
+  });
 }
 
 export function blockHasType<BType extends string, Props extends PropSchema>(

packages/core/src/schema/blocks/createSpec.ts

@@ -385,6 +385,9 @@ export function createBlockSpec<
       config: blockConfig,
       implementation: {
         ...blockImplementation,
+        // If the block implementation does not specify a runsBefore, we default to ["default"]
+        // This allows for custom blocks to always be prioritized over default blocks.
+        runsBefore: blockImplementation.runsBefore ?? ["default"],
         // TODO: this should not have wrapInBlockStructure and generally be a lot simpler
         // post-processing in externalHTMLExporter should not be necessary
         toExternalHTML(block, editor) {

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

@@ -0,0 +1,15 @@
+<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="advancedComplexAttributeNode"
+        data-user="{&quot;name&quot;:{&quot;first&quot;:&quot;USER_FIRST_NAME&quot;,&quot;last&quot;:&quot;USER_LAST_NAME&quot;},&quot;age&quot;:30}"
+      >
+        <div
+          data-user="{&quot;name&quot;:{&quot;first&quot;:&quot;USER_FIRST_NAME&quot;,&quot;last&quot;:&quot;USER_LAST_NAME&quot;},&quot;age&quot;:30}"
+        ></div>
+      </div>
+    </div>
+  </div>
+</div>

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/advancedComplexAttributeNode.html

@@ -0,0 +1,3 @@
+<div
+  data-user="{&quot;name&quot;:{&quot;first&quot;:&quot;USER_FIRST_NAME&quot;,&quot;last&quot;:&quot;USER_LAST_NAME&quot;},&quot;age&quot;:30}"
+></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/advancedComplexAttributeNode.json

@@ -0,0 +1,22 @@
+[
+  {
+    "attrs": {
+      "id": "1",
+    },
+    "content": [
+      {
+        "attrs": {
+          "user": {
+            "age": 30,
+            "name": {
+              "first": "USER_FIRST_NAME",
+              "last": "USER_LAST_NAME",
+            },
+          },
+        },
+        "type": "advancedComplexAttributeNode",
+      },
+    ],
+    "type": "blockContainer",
+  },
+]

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,35 @@ export const exportTestInstancesBlockNoteHTML: TestInstance<
     },
     executeTest: testExportBlockNoteHTML,
   },
+  {
+    testCase: {
+      name: "custom-blocks/simpleCustomParagraph",
+      content: [
+        {
+          type: "simpleCustomParagraph",
+          content: "Simple Custom Paragraph",
+        },
+      ],
+    },
+    executeTest: testExportBlockNoteHTML,
+  },
+  {
+    testCase: {
+      name: "custom-blocks/advancedComplexAttributeNode",
+      content: [
+        {
+          type: "advancedComplexAttributeNode",
+          props: {
+            user: {
+              name: { first: "USER_FIRST_NAME", last: "USER_LAST_NAME" },
+              age: 30,
+            },
+          },
+        },
+      ],
+    },
+    executeTest: testExportBlockNoteHTML,
+  },
 ];
 
 export const exportTestInstancesHTML: TestInstance<

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

@@ -1,4 +1,28 @@
 {
+  "advancedComplexAttributeNode": {
+    "config": {
+      "content": "none",
+      "propSchema": {
+        "user": {
+          "age": 30,
+          "name": {
+            "first": "John",
+            "last": "Doe",
+          },
+        },
+      },
+      "type": "advancedComplexAttributeNode",
+    },
+    "extensions": undefined,
+    "implementation": {
+      "node": null,
+      "render": [Function],
+      "runsBefore": [
+        "default",
+      ],
+      "toExternalHTML": [Function],
+    },
+  },
   "audio": {
     "config": {
       "content": "none",
@@ -62,6 +86,7 @@
       "parse": [Function],
       "parseContent": [Function],
       "render": [Function],
+      "runsBefore": [],
       "toExternalHTML": [Function],
     },
   },
@@ -175,6 +200,7 @@
       "parse": [Function],
       "parseContent": [Function],
       "render": [Function],
+      "runsBefore": [],
       "toExternalHTML": [Function],
     },
   },
@@ -191,7 +217,11 @@
     "extensions": undefined,
     "implementation": {
       "node": null,
+      "parse": [Function],
       "render": [Function],
+      "runsBefore": [
+        "default",
+      ],
       "toExternalHTML": [Function],
     },
   },
@@ -222,6 +252,7 @@
       "node": null,
       "parse": [Function],
       "render": [Function],
+      "runsBefore": [],
       "toExternalHTML": [Function],
     },
   },
@@ -246,6 +277,7 @@
       "node": null,
       "parse": [Function],
       "render": [Function],
+      "runsBefore": [],
       "toExternalHTML": [Function],
     },
   },
@@ -309,6 +341,7 @@
       "node": null,
       "parse": [Function],
       "render": [Function],
+      "runsBefore": [],
       "toExternalHTML": [Function],
     },
   },
@@ -395,6 +428,7 @@
       "parse": [Function],
       "parseContent": [Function],
       "render": [Function],
+      "runsBefore": [],
       "toExternalHTML": [Function],
     },
   },
@@ -409,6 +443,7 @@
       "node": null,
       "parse": [Function],
       "render": [Function],
+      "runsBefore": [],
       "toExternalHTML": [Function],
     },
   },
@@ -478,6 +513,7 @@
       "node": null,
       "parse": [Function],
       "render": [Function],
+      "runsBefore": [],
       "toExternalHTML": [Function],
     },
   },
@@ -495,6 +531,9 @@
     "implementation": {
       "node": null,
       "render": [Function],
+      "runsBefore": [
+        "default",
+      ],
       "toExternalHTML": [Function],
     },
   },
@@ -515,6 +554,9 @@
     "implementation": {
       "node": null,
       "render": [Function],
+      "runsBefore": [
+        "default",
+      ],
       "toExternalHTML": [Function],
     },
   },
@@ -651,6 +693,7 @@
       },
       "node": null,
       "render": [Function],
+      "runsBefore": [],
       "toExternalHTML": [Function],
     },
   },