@blocknote/core 0.7.1-alpha.0 → 0.8.1

package/src/api/formatConversions/formatConversions.ts

@@ -7,13 +7,14 @@ import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
 import remarkStringify from "remark-stringify";
 import { unified } from "unified";
-import { Block } from "../../extensions/Blocks/api/blockTypes";
+import { Block, BlockSchema } from "../../extensions/Blocks/api/blockTypes";
+
 import { blockToNode, nodeToBlock } from "../nodeConversions/nodeConversions";
 import { removeUnderlines } from "./removeUnderlinesRehypePlugin";
 import { simplifyBlocks } from "./simplifyBlocksRehypePlugin";
 
-export async function blocksToHTML(
-  blocks: Block[],
+export async function blocksToHTML<BSchema extends BlockSchema>(
+  blocks: Block<BSchema>[],
   schema: Schema
 ): Promise<string> {
   const htmlParentElement = document.createElement("div");
@@ -37,27 +38,28 @@ export async function blocksToHTML(
   return htmlString.value as string;
 }
 
-export async function HTMLToBlocks(
+export async function HTMLToBlocks<BSchema extends BlockSchema>(
   html: string,
+  blockSchema: BSchema,
   schema: Schema
-): Promise<Block[]> {
+): Promise<Block<BSchema>[]> {
   const htmlNode = document.createElement("div");
   htmlNode.innerHTML = html.trim();
 
   const parser = DOMParser.fromSchema(schema);
   const parentNode = parser.parse(htmlNode);
 
-  const blocks: Block[] = [];
+  const blocks: Block<BSchema>[] = [];
 
   for (let i = 0; i < parentNode.firstChild!.childCount; i++) {
-    blocks.push(nodeToBlock(parentNode.firstChild!.child(i)));
+    blocks.push(nodeToBlock(parentNode.firstChild!.child(i), blockSchema));
   }
 
   return blocks;
 }
 
-export async function blocksToMarkdown(
-  blocks: Block[],
+export async function blocksToMarkdown<BSchema extends BlockSchema>(
+  blocks: Block<BSchema>[],
   schema: Schema
 ): Promise<string> {
   const markdownString = await unified()
@@ -71,10 +73,11 @@ export async function blocksToMarkdown(
   return markdownString.value as string;
 }
 
-export async function markdownToBlocks(
+export async function markdownToBlocks<BSchema extends BlockSchema>(
   markdown: string,
+  blockSchema: BSchema,
   schema: Schema
-): Promise<Block[]> {
+): Promise<Block<BSchema>[]> {
   const htmlString = await unified()
     .use(remarkParse)
     .use(remarkGfm)
@@ -82,5 +85,5 @@ export async function markdownToBlocks(
     .use(rehypeStringify)
     .process(markdown);
 
-  return HTMLToBlocks(htmlString.value as string, schema);
+  return HTMLToBlocks(htmlString.value as string, blockSchema, schema);
 }

package/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap

@@ -183,6 +183,298 @@ exports[`Simple ProseMirror Node Conversions > Convert simple node to block 1`]
 }
 `;
 
+exports[`hard breaks > Convert a block with a hard break 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "4",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "text": "Text1",
+          "type": "text",
+        },
+        {
+          "type": "hardBreak",
+        },
+        {
+          "text": "Text2",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`hard breaks > Convert a block with a hard break and different styles 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "4",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "text": "Text1",
+          "type": "text",
+        },
+        {
+          "type": "hardBreak",
+        },
+        {
+          "marks": [
+            {
+              "type": "bold",
+            },
+          ],
+          "text": "Text2",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`hard breaks > Convert a block with a hard break at the end 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "4",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "text": "Text1",
+          "type": "text",
+        },
+        {
+          "type": "hardBreak",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`hard breaks > Convert a block with a hard break at the start 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "4",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "type": "hardBreak",
+        },
+        {
+          "text": "Text1",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`hard breaks > Convert a block with a hard break between links 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "4",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "marks": [
+            {
+              "attrs": {
+                "class": null,
+                "href": "https://www.website.com",
+                "target": "_blank",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Link1",
+          "type": "text",
+        },
+        {
+          "type": "hardBreak",
+        },
+        {
+          "marks": [
+            {
+              "attrs": {
+                "class": null,
+                "href": "https://www.website2.com",
+                "target": "_blank",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Link2",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`hard breaks > Convert a block with a hard break in a link 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "4",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "marks": [
+            {
+              "attrs": {
+                "class": null,
+                "href": "https://www.website.com",
+                "target": "_blank",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Link1",
+          "type": "text",
+        },
+        {
+          "type": "hardBreak",
+        },
+        {
+          "marks": [
+            {
+              "attrs": {
+                "class": null,
+                "href": "https://www.website.com",
+                "target": "_blank",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Link1",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`hard breaks > Convert a block with multiple hard breaks 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "4",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "text": "Text1",
+          "type": "text",
+        },
+        {
+          "type": "hardBreak",
+        },
+        {
+          "text": "Text2",
+          "type": "text",
+        },
+        {
+          "type": "hardBreak",
+        },
+        {
+          "text": "Text3",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`hard breaks > Convert a block with only a hard break 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "4",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "type": "hardBreak",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
 exports[`links > Convert a block with link 1`] = `
 {
   "attrs": {

package/src/api/nodeConversions/nodeConversions.test.ts

@@ -5,14 +5,18 @@ import { BlockNoteEditor, PartialBlock } from "../..";
 import UniqueID from "../../extensions/UniqueID/UniqueID";
 import { blockToNode, nodeToBlock } from "./nodeConversions";
 import { partialBlockToBlockForTesting } from "./testUtil";
+import {
+  defaultBlockSchema,
+  DefaultBlockSchema,
+} from "../../extensions/Blocks/api/defaultBlocks";
 
 let editor: BlockNoteEditor;
 let tt: Editor;
 
-let simpleBlock: PartialBlock;
+let simpleBlock: PartialBlock<DefaultBlockSchema>;
 let simpleNode: Node;
 
-let complexBlock: PartialBlock;
+let complexBlock: PartialBlock<DefaultBlockSchema>;
 let complexNode: Node;
 
 beforeEach(() => {
@@ -119,7 +123,10 @@ describe("Simple ProseMirror Node Conversions", () => {
   });
 
   it("Convert simple node to block", async () => {
-    const firstBlockConversion = nodeToBlock(simpleNode);
+    const firstBlockConversion = nodeToBlock<DefaultBlockSchema>(
+      simpleNode,
+      defaultBlockSchema
+    );
 
     expect(firstBlockConversion).toMatchSnapshot();
 
@@ -137,7 +144,10 @@ describe("Complex ProseMirror Node Conversions", () => {
   });
 
   it("Convert complex node to block", async () => {
-    const firstBlockConversion = nodeToBlock(complexNode);
+    const firstBlockConversion = nodeToBlock<DefaultBlockSchema>(
+      complexNode,
+      defaultBlockSchema
+    );
 
     expect(firstBlockConversion).toMatchSnapshot();
 
@@ -149,7 +159,7 @@ describe("Complex ProseMirror Node Conversions", () => {
 
 describe("links", () => {
   it("Convert a block with link", async () => {
-    const block: PartialBlock = {
+    const block: PartialBlock<DefaultBlockSchema> = {
       id: UniqueID.options.generateID(),
       type: "paragraph",
       content: [
@@ -162,7 +172,10 @@ describe("links", () => {
     };
     const node = blockToNode(block, tt.schema);
     expect(node).toMatchSnapshot();
-    const outputBlock = nodeToBlock(node);
+    const outputBlock = nodeToBlock<DefaultBlockSchema>(
+      node,
+      defaultBlockSchema
+    );
 
     // Temporary fix to set props to {}, because at this point
     // we don't have an easy way to access default props at runtime,
@@ -174,7 +187,7 @@ describe("links", () => {
   });
 
   it("Convert link block with marks", async () => {
-    const block: PartialBlock = {
+    const block: PartialBlock<DefaultBlockSchema> = {
       id: UniqueID.options.generateID(),
       type: "paragraph",
       content: [
@@ -200,7 +213,10 @@ describe("links", () => {
     };
     const node = blockToNode(block, tt.schema);
     // expect(node).toMatchSnapshot();
-    const outputBlock = nodeToBlock(node);
+    const outputBlock = nodeToBlock<DefaultBlockSchema>(
+      node,
+      defaultBlockSchema
+    );
 
     // Temporary fix to set props to {}, because at this point
     // we don't have an easy way to access default props at runtime,
@@ -212,7 +228,7 @@ describe("links", () => {
   });
 
   it("Convert two adjacent links in a block", async () => {
-    const block: PartialBlock = {
+    const block: PartialBlock<DefaultBlockSchema> = {
       id: UniqueID.options.generateID(),
       type: "paragraph",
       content: [
@@ -231,7 +247,246 @@ describe("links", () => {
 
     const node = blockToNode(block, tt.schema);
     expect(node).toMatchSnapshot();
-    const outputBlock = nodeToBlock(node);
+    const outputBlock = nodeToBlock<DefaultBlockSchema>(
+      node,
+      defaultBlockSchema
+    );
+
+    // Temporary fix to set props to {}, because at this point
+    // we don't have an easy way to access default props at runtime,
+    // so partialBlockToBlockForTesting will not set them.
+    (outputBlock as any).props = {};
+    const fullOriginalBlock = partialBlockToBlockForTesting(block);
+
+    expect(outputBlock).toStrictEqual(fullOriginalBlock);
+  });
+});
+
+describe("hard breaks", () => {
+  it("Convert a block with a hard break", async () => {
+    const block: PartialBlock<DefaultBlockSchema> = {
+      id: UniqueID.options.generateID(),
+      type: "paragraph",
+      content: [
+        {
+          type: "text",
+          text: "Text1\nText2",
+          styles: {},
+        },
+      ],
+    };
+    const node = blockToNode(block, tt.schema);
+    expect(node).toMatchSnapshot();
+    const outputBlock = nodeToBlock<DefaultBlockSchema>(
+      node,
+      defaultBlockSchema
+    );
+
+    // Temporary fix to set props to {}, because at this point
+    // we don't have an easy way to access default props at runtime,
+    // so partialBlockToBlockForTesting will not set them.
+    (outputBlock as any).props = {};
+    const fullOriginalBlock = partialBlockToBlockForTesting(block);
+
+    expect(outputBlock).toStrictEqual(fullOriginalBlock);
+  });
+
+  it("Convert a block with multiple hard breaks", async () => {
+    const block: PartialBlock<DefaultBlockSchema> = {
+      id: UniqueID.options.generateID(),
+      type: "paragraph",
+      content: [
+        {
+          type: "text",
+          text: "Text1\nText2\nText3",
+          styles: {},
+        },
+      ],
+    };
+    const node = blockToNode(block, tt.schema);
+    expect(node).toMatchSnapshot();
+    const outputBlock = nodeToBlock<DefaultBlockSchema>(
+      node,
+      defaultBlockSchema
+    );
+
+    // Temporary fix to set props to {}, because at this point
+    // we don't have an easy way to access default props at runtime,
+    // so partialBlockToBlockForTesting will not set them.
+    (outputBlock as any).props = {};
+    const fullOriginalBlock = partialBlockToBlockForTesting(block);
+
+    expect(outputBlock).toStrictEqual(fullOriginalBlock);
+  });
+
+  it("Convert a block with a hard break at the start", async () => {
+    const block: PartialBlock<DefaultBlockSchema> = {
+      id: UniqueID.options.generateID(),
+      type: "paragraph",
+      content: [
+        {
+          type: "text",
+          text: "\nText1",
+          styles: {},
+        },
+      ],
+    };
+    const node = blockToNode(block, tt.schema);
+    expect(node).toMatchSnapshot();
+    const outputBlock = nodeToBlock<DefaultBlockSchema>(
+      node,
+      defaultBlockSchema
+    );
+
+    // Temporary fix to set props to {}, because at this point
+    // we don't have an easy way to access default props at runtime,
+    // so partialBlockToBlockForTesting will not set them.
+    (outputBlock as any).props = {};
+    const fullOriginalBlock = partialBlockToBlockForTesting(block);
+
+    expect(outputBlock).toStrictEqual(fullOriginalBlock);
+  });
+
+  it("Convert a block with a hard break at the end", async () => {
+    const block: PartialBlock<DefaultBlockSchema> = {
+      id: UniqueID.options.generateID(),
+      type: "paragraph",
+      content: [
+        {
+          type: "text",
+          text: "Text1\n",
+          styles: {},
+        },
+      ],
+    };
+    const node = blockToNode(block, tt.schema);
+    expect(node).toMatchSnapshot();
+    const outputBlock = nodeToBlock<DefaultBlockSchema>(
+      node,
+      defaultBlockSchema
+    );
+
+    // Temporary fix to set props to {}, because at this point
+    // we don't have an easy way to access default props at runtime,
+    // so partialBlockToBlockForTesting will not set them.
+    (outputBlock as any).props = {};
+    const fullOriginalBlock = partialBlockToBlockForTesting(block);
+
+    expect(outputBlock).toStrictEqual(fullOriginalBlock);
+  });
+
+  it("Convert a block with only a hard break", async () => {
+    const block: PartialBlock<DefaultBlockSchema> = {
+      id: UniqueID.options.generateID(),
+      type: "paragraph",
+      content: [
+        {
+          type: "text",
+          text: "\n",
+          styles: {},
+        },
+      ],
+    };
+    const node = blockToNode(block, tt.schema);
+    expect(node).toMatchSnapshot();
+    const outputBlock = nodeToBlock<DefaultBlockSchema>(
+      node,
+      defaultBlockSchema
+    );
+
+    // Temporary fix to set props to {}, because at this point
+    // we don't have an easy way to access default props at runtime,
+    // so partialBlockToBlockForTesting will not set them.
+    (outputBlock as any).props = {};
+    const fullOriginalBlock = partialBlockToBlockForTesting(block);
+
+    expect(outputBlock).toStrictEqual(fullOriginalBlock);
+  });
+
+  it("Convert a block with a hard break and different styles", async () => {
+    const block: PartialBlock<DefaultBlockSchema> = {
+      id: UniqueID.options.generateID(),
+      type: "paragraph",
+      content: [
+        {
+          type: "text",
+          text: "Text1\n",
+          styles: {},
+        },
+        {
+          type: "text",
+          text: "Text2",
+          styles: { bold: true },
+        },
+      ],
+    };
+    const node = blockToNode(block, tt.schema);
+    expect(node).toMatchSnapshot();
+    const outputBlock = nodeToBlock<DefaultBlockSchema>(
+      node,
+      defaultBlockSchema
+    );
+
+    // Temporary fix to set props to {}, because at this point
+    // we don't have an easy way to access default props at runtime,
+    // so partialBlockToBlockForTesting will not set them.
+    (outputBlock as any).props = {};
+    const fullOriginalBlock = partialBlockToBlockForTesting(block);
+
+    expect(outputBlock).toStrictEqual(fullOriginalBlock);
+  });
+
+  it("Convert a block with a hard break in a link", async () => {
+    const block: PartialBlock<DefaultBlockSchema> = {
+      id: UniqueID.options.generateID(),
+      type: "paragraph",
+      content: [
+        {
+          type: "link",
+          href: "https://www.website.com",
+          content: "Link1\nLink1",
+        },
+      ],
+    };
+    const node = blockToNode(block, tt.schema);
+    expect(node).toMatchSnapshot();
+    const outputBlock = nodeToBlock<DefaultBlockSchema>(
+      node,
+      defaultBlockSchema
+    );
+
+    // Temporary fix to set props to {}, because at this point
+    // we don't have an easy way to access default props at runtime,
+    // so partialBlockToBlockForTesting will not set them.
+    (outputBlock as any).props = {};
+    const fullOriginalBlock = partialBlockToBlockForTesting(block);
+
+    expect(outputBlock).toStrictEqual(fullOriginalBlock);
+  });
+
+  it("Convert a block with a hard break between links", async () => {
+    const block: PartialBlock<DefaultBlockSchema> = {
+      id: UniqueID.options.generateID(),
+      type: "paragraph",
+      content: [
+        {
+          type: "link",
+          href: "https://www.website.com",
+          content: "Link1\n",
+        },
+        {
+          type: "link",
+          href: "https://www.website2.com",
+          content: "Link2",
+        },
+      ],
+    };
+    const node = blockToNode(block, tt.schema);
+    expect(node).toMatchSnapshot();
+    const outputBlock = nodeToBlock<DefaultBlockSchema>(
+      node,
+      defaultBlockSchema
+    );
 
     // Temporary fix to set props to {}, because at this point
     // we don't have an easy way to access default props at runtime,