fix: node conversion (#800)

* fix: node conversion

* fix \n

* test node conversions

* fix: command `BNUpdateBlock`

* Add a test for customBlock with line breaks.

* add test for BNUpdateBlock with line break

* fix type error

* Refactored unit tests

---------

Co-authored-by: Matthew Lipski <matthewlipski@gmail.com>

Author: jkcs

examples/05-custom-schema/01-alert-block/styles.css

@@ -4,7 +4,7 @@
     align-items: center;
     flex-grow: 1;
     border-radius: 4px;
-    height: 48px;
+    min-height: 48px;
     padding: 4px;
 }
 

packages/core/src/api/blockManipulation/__snapshots__/blockManipulation.test.ts.snap

@@ -614,3 +614,101 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
   },
 ]
 `;
+
+exports[`Update Line Breaks > Update custom block with line break 1`] = `
+[
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Line1
+Line2",
+        "type": "text",
+      },
+    ],
+    "id": "1",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Updated Custom Block with 
+line 
+break",
+        "type": "text",
+      },
+    ],
+    "id": "2",
+    "props": {},
+    "type": "customBlock",
+  },
+  {
+    "children": [],
+    "content": [],
+    "id": "0",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+]
+`;
+
+exports[`Update Line Breaks > Update paragraph with line break 1`] = `
+[
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Updated Custom Block with 
+line 
+break",
+        "type": "text",
+      },
+    ],
+    "id": "1",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Line1
+Line2",
+        "type": "text",
+      },
+    ],
+    "id": "2",
+    "props": {},
+    "type": "customBlock",
+  },
+  {
+    "children": [],
+    "content": [],
+    "id": "0",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+]
+`;

packages/core/src/api/blockManipulation/blockManipulation.test.ts

@@ -1,14 +1,42 @@
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import {
   Block,
-  DefaultBlockSchema,
+  defaultBlockSpecs,
   DefaultInlineContentSchema,
   DefaultStyleSchema,
   PartialBlock,
 } from "../../blocks/defaultBlocks";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { createBlockSpec } from "../../schema";
+import { BlockNoteSchema } from "../../editor/BlockNoteSchema";
+
+const CustomBlock = createBlockSpec(
+  {
+    type: "customBlock",
+    propSchema: {},
+    content: "inline",
+  } as const,
+  {
+    render: () => {
+      const dom = document.createElement("div");
+      dom.className = "custom-block";
+
+      return {
+        dom: dom,
+        contentDOM: dom,
+      };
+    },
+  }
+);
+
+const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    ...defaultBlockSpecs,
+    customBlock: CustomBlock,
+  },
+});
 
-let editor: BlockNoteEditor;
+let editor: BlockNoteEditor<typeof schema.blockSchema>;
 const div = document.createElement("div");
 
 function waitForEditor() {
@@ -23,27 +51,36 @@ function waitForEditor() {
 }
 
 let singleBlock: PartialBlock<
-  DefaultBlockSchema,
+  typeof schema.blockSchema,
   DefaultInlineContentSchema,
   DefaultStyleSchema
 >;
 
 let multipleBlocks: PartialBlock<
-  DefaultBlockSchema,
+  typeof schema.blockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema
+>[];
+
+let blocksWithLineBreaks: PartialBlock<
+  typeof schema.blockSchema,
   DefaultInlineContentSchema,
   DefaultStyleSchema
 >[];
 
 let insert: (
   placement: "before" | "nested" | "after"
 ) => Block<
-  DefaultBlockSchema,
+  typeof schema.blockSchema,
   DefaultInlineContentSchema,
   DefaultStyleSchema
 >[];
 
 beforeEach(() => {
-  editor = BlockNoteEditor.create();
+  editor = BlockNoteEditor.create<typeof schema.blockSchema>({
+    schema: schema,
+  });
+
   editor.mount(div);
 
   singleBlock = {
@@ -86,6 +123,17 @@ beforeEach(() => {
     },
   ];
 
+  blocksWithLineBreaks = [
+    {
+      type: "paragraph",
+      content: "Line1\nLine2",
+    },
+    {
+      type: "customBlock",
+      content: "Line1\nLine2",
+    },
+  ];
+
   insert = (placement) => {
     const existingBlock = editor.document[0];
     editor.insertBlocks(multipleBlocks, existingBlock, placement);
@@ -122,7 +170,7 @@ describe("Test strong typing", () => {
         {
           type: "paragraph",
           props: {
-            // @ts-expect-error level not suitable for paragraph
+            // @ts-expect-error invalid type
             level: 1,
           },
         }
@@ -236,3 +284,34 @@ describe("Insert, Update, & Delete Blocks", () => {
     expect(editor.document).toMatchSnapshot();
   });
 });
+
+describe("Update Line Breaks", () => {
+  it("Update paragraph with line break", async () => {
+    await waitForEditor();
+
+    const existingBlock = editor.document[0];
+    editor.insertBlocks(blocksWithLineBreaks, existingBlock);
+
+    const newBlock = editor.document[0];
+    editor.updateBlock(newBlock, {
+      type: "paragraph",
+      content: "Updated Custom Block with \nline \nbreak",
+    });
+
+    expect(editor.document).toMatchSnapshot();
+  });
+  it("Update custom block with line break", async () => {
+    await waitForEditor();
+
+    const existingBlock = editor.document[0];
+    editor.insertBlocks(blocksWithLineBreaks, existingBlock);
+
+    const newBlock = editor.document[1];
+    editor.updateBlock(newBlock, {
+      type: "customBlock",
+      content: "Updated Custom Block with \nline \nbreak",
+    });
+
+    expect(editor.document).toMatchSnapshot();
+  });
+});

packages/core/src/api/exporters/html/__snapshots__/customBlock/basic/external.html

@@ -0,0 +1 @@
+<div class="bn-inline-content custom-block" data-editable="">Custom customBlock</div><div class="bn-inline-content custom-block" data-editable="">Custom customBlock <br>with <br>line breaks</div>

packages/core/src/api/exporters/html/__snapshots__/customBlock/basic/internal.html

@@ -0,0 +1 @@
+<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="customBlock"><div class="bn-inline-content custom-block" data-editable="">Custom customBlock</div></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="customBlock"><div class="bn-inline-content custom-block" data-editable="">Custom customBlock <br>with <br>line breaks</div></div></div></div></div>

packages/core/src/api/exporters/html/__snapshots__/customParagraph/lineBreaks/external.html

@@ -0,0 +1 @@
+<p class="custom-paragraph">Hello World</p>

packages/core/src/api/exporters/html/__snapshots__/customParagraph/lineBreaks/internal.html

@@ -0,0 +1 @@
+<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="customParagraph"><p class="bn-inline-content custom-paragraph" data-editable="">Line 1<br>Line 2</p></div></div></div></div>

packages/core/src/api/exporters/html/__snapshots__/paragraph/lineBreaks/external.html

@@ -0,0 +1 @@
+<p class="bn-inline-content">Line 1<br>Line 2</p>

packages/core/src/api/exporters/html/__snapshots__/paragraph/lineBreaks/internal.html

@@ -0,0 +1 @@
+<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">Line 1<br>Line 2</p></div></div></div></div>

packages/core/src/api/exporters/markdown/__snapshots__/customBlock/basic/markdown.md

@@ -0,0 +1,5 @@
+Custom customBlock
+
+Custom customBlock\
+with\
+line breaks