@blocknote/core 0.13.4 → 0.14.0

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

@@ -1,5 +1,539 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Test BlockNote-Prosemirror conversion > Case: custom blocks schema > Convert customParagraph/basic to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "text": "Custom Paragraph",
+          "type": "text",
+        },
+      ],
+      "type": "customParagraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`Test BlockNote-Prosemirror conversion > Case: custom blocks schema > Convert customParagraph/lineBreaks to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "text": "Line 1",
+          "type": "text",
+        },
+        {
+          "type": "hardBreak",
+        },
+        {
+          "text": "Line 2",
+          "type": "text",
+        },
+      ],
+      "type": "customParagraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`Test BlockNote-Prosemirror conversion > Case: custom blocks schema > Convert customParagraph/nested to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "text": "Custom Paragraph",
+          "type": "text",
+        },
+      ],
+      "type": "customParagraph",
+    },
+    {
+      "content": [
+        {
+          "attrs": {
+            "backgroundColor": "default",
+            "id": "2",
+            "textColor": "default",
+          },
+          "content": [
+            {
+              "attrs": {
+                "textAlignment": "left",
+              },
+              "content": [
+                {
+                  "text": "Nested Custom Paragraph 1",
+                  "type": "text",
+                },
+              ],
+              "type": "customParagraph",
+            },
+          ],
+          "type": "blockContainer",
+        },
+        {
+          "attrs": {
+            "backgroundColor": "default",
+            "id": "3",
+            "textColor": "default",
+          },
+          "content": [
+            {
+              "attrs": {
+                "textAlignment": "left",
+              },
+              "content": [
+                {
+                  "text": "Nested Custom Paragraph 2",
+                  "type": "text",
+                },
+              ],
+              "type": "customParagraph",
+            },
+          ],
+          "type": "blockContainer",
+        },
+      ],
+      "type": "blockGroup",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`Test BlockNote-Prosemirror conversion > Case: custom blocks schema > Convert customParagraph/styled to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "pink",
+    "id": "1",
+    "textColor": "orange",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "center",
+      },
+      "content": [
+        {
+          "text": "Plain ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "attrs": {
+                "stringValue": "red",
+              },
+              "type": "textColor",
+            },
+          ],
+          "text": "Red Text ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "attrs": {
+                "stringValue": "blue",
+              },
+              "type": "backgroundColor",
+            },
+          ],
+          "text": "Blue Background ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "attrs": {
+                "stringValue": "red",
+              },
+              "type": "textColor",
+            },
+            {
+              "attrs": {
+                "stringValue": "blue",
+              },
+              "type": "backgroundColor",
+            },
+          ],
+          "text": "Mixed Colors",
+          "type": "text",
+        },
+      ],
+      "type": "customParagraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`Test BlockNote-Prosemirror conversion > Case: custom blocks schema > Convert simpleCustomParagraph/basic to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "text": "Custom Paragraph",
+          "type": "text",
+        },
+      ],
+      "type": "simpleCustomParagraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`Test BlockNote-Prosemirror conversion > Case: custom blocks schema > Convert simpleCustomParagraph/nested to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "text": "Custom Paragraph",
+          "type": "text",
+        },
+      ],
+      "type": "simpleCustomParagraph",
+    },
+    {
+      "content": [
+        {
+          "attrs": {
+            "backgroundColor": "default",
+            "id": "2",
+            "textColor": "default",
+          },
+          "content": [
+            {
+              "attrs": {
+                "textAlignment": "left",
+              },
+              "content": [
+                {
+                  "text": "Nested Custom Paragraph 1",
+                  "type": "text",
+                },
+              ],
+              "type": "simpleCustomParagraph",
+            },
+          ],
+          "type": "blockContainer",
+        },
+        {
+          "attrs": {
+            "backgroundColor": "default",
+            "id": "3",
+            "textColor": "default",
+          },
+          "content": [
+            {
+              "attrs": {
+                "textAlignment": "left",
+              },
+              "content": [
+                {
+                  "text": "Nested Custom Paragraph 2",
+                  "type": "text",
+                },
+              ],
+              "type": "simpleCustomParagraph",
+            },
+          ],
+          "type": "blockContainer",
+        },
+      ],
+      "type": "blockGroup",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`Test BlockNote-Prosemirror conversion > Case: custom blocks schema > Convert simpleCustomParagraph/styled to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "pink",
+    "id": "1",
+    "textColor": "orange",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "center",
+      },
+      "content": [
+        {
+          "text": "Plain ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "attrs": {
+                "stringValue": "red",
+              },
+              "type": "textColor",
+            },
+          ],
+          "text": "Red Text ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "attrs": {
+                "stringValue": "blue",
+              },
+              "type": "backgroundColor",
+            },
+          ],
+          "text": "Blue Background ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "attrs": {
+                "stringValue": "red",
+              },
+              "type": "textColor",
+            },
+            {
+              "attrs": {
+                "stringValue": "blue",
+              },
+              "type": "backgroundColor",
+            },
+          ],
+          "text": "Mixed Colors",
+          "type": "text",
+        },
+      ],
+      "type": "simpleCustomParagraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`Test BlockNote-Prosemirror conversion > Case: custom blocks schema > Convert simpleImage/basic to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "caption": "Caption",
+        "name": "example",
+        "previewWidth": 256,
+        "showPreview": true,
+        "textAlignment": "left",
+        "url": "exampleURL",
+      },
+      "type": "simpleImage",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`Test BlockNote-Prosemirror conversion > Case: custom blocks schema > Convert simpleImage/button to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "caption": "",
+        "name": "",
+        "previewWidth": 512,
+        "showPreview": true,
+        "textAlignment": "left",
+        "url": "",
+      },
+      "type": "simpleImage",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`Test BlockNote-Prosemirror conversion > Case: custom blocks schema > Convert simpleImage/nested to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "caption": "Caption",
+        "name": "example",
+        "previewWidth": 256,
+        "showPreview": true,
+        "textAlignment": "left",
+        "url": "exampleURL",
+      },
+      "type": "simpleImage",
+    },
+    {
+      "content": [
+        {
+          "attrs": {
+            "backgroundColor": "default",
+            "id": "2",
+            "textColor": "default",
+          },
+          "content": [
+            {
+              "attrs": {
+                "caption": "Caption",
+                "name": "example",
+                "previewWidth": 256,
+                "showPreview": true,
+                "textAlignment": "left",
+                "url": "exampleURL",
+              },
+              "type": "simpleImage",
+            },
+          ],
+          "type": "blockContainer",
+        },
+      ],
+      "type": "blockGroup",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`Test BlockNote-Prosemirror conversion > Case: custom blocks schema > Convert simpleImage/noCaption to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "caption": "",
+        "name": "example",
+        "previewWidth": 256,
+        "showPreview": true,
+        "textAlignment": "left",
+        "url": "exampleURL",
+      },
+      "type": "simpleImage",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`Test BlockNote-Prosemirror conversion > Case: custom blocks schema > Convert simpleImage/noName to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "caption": "Caption",
+        "name": "",
+        "previewWidth": 256,
+        "showPreview": true,
+        "textAlignment": "left",
+        "url": "exampleURL",
+      },
+      "type": "simpleImage",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`Test BlockNote-Prosemirror conversion > Case: custom blocks schema > Convert simpleImage/noPreview to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "caption": "Caption",
+        "name": "example",
+        "previewWidth": 256,
+        "showPreview": false,
+        "textAlignment": "left",
+        "url": "exampleURL",
+      },
+      "type": "simpleImage",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
 exports[`Test BlockNote-Prosemirror conversion > Case: custom inline content schema > Convert mention/basic to/from prosemirror 1`] = `
 {
   "attrs": {
@@ -1046,6 +1580,38 @@ exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert
 }
 `;
 
+exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert paragraph/lineBreaks to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "text": "Line 1",
+          "type": "text",
+        },
+        {
+          "type": "hardBreak",
+        },
+        {
+          "text": "Line 2",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
 exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert paragraph/nested to/from prosemirror 1`] = `
 {
   "attrs": {

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

@@ -6,6 +6,7 @@ import { PartialBlock } from "../../blocks/defaultBlocks";
 import { customInlineContentTestCases } from "../testUtil/cases/customInlineContent";
 import { customStylesTestCases } from "../testUtil/cases/customStyles";
 import { defaultSchemaTestCases } from "../testUtil/cases/defaultSchema";
+import { customBlocksTestCases } from "../testUtil/cases/customBlocks";
 import {
   addIdsToBlock,
   partialBlockToBlockForTesting,
@@ -44,6 +45,7 @@ const testCases = [
   defaultSchemaTestCases,
   customStylesTestCases,
   customInlineContentTestCases,
+  customBlocksTestCases,
 ];
 
 describe("Test BlockNote-Prosemirror conversion", () => {

package/src/api/nodeConversions/nodeConversions.ts

@@ -212,10 +212,8 @@ function blockOrInlineContentToContentNode(
   if (!block.content) {
     contentNode = schema.nodes[type].create(block.props);
   } else if (typeof block.content === "string") {
-    contentNode = schema.nodes[type].create(
-      block.props,
-      schema.text(block.content)
-    );
+    const nodes = inlineContentToNodes([block.content], schema, styleSchema);
+    contentNode = schema.nodes[type].create(block.props, nodes);
   } else if (Array.isArray(block.content)) {
     const nodes = inlineContentToNodes(block.content, schema, styleSchema);
     contentNode = schema.nodes[type].create(block.props, nodes);

package/src/api/parsers/html/__snapshots__/paste/parse-image-in-paragraph.json

@@ -0,0 +1,16 @@
+[
+  {
+    "id": "1",
+    "type": "image",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "name": "",
+      "url": "exampleURL",
+      "caption": "",
+      "showPreview": true,
+      "previewWidth": 512
+    },
+    "children": []
+  }
+]

package/src/api/parsers/html/parseHTML.test.ts

@@ -295,6 +295,14 @@ describe("Parse HTML", () => {
     await parseHTMLAndCompareSnapshots(html, "parse-two-divs");
   });
 
+  it("Parse image in paragraph", async () => {
+    const html = `<p>
+    <img src="exampleURL">
+  </p>`;
+
+    await parseHTMLAndCompareSnapshots(html, "parse-image-in-paragraph");
+  });
+
   it("Parse fake image caption", async () => {
     const html = `<div>
     <img src="exampleURL">

package/src/api/parsers/pasteExtension.ts

@@ -27,6 +27,11 @@ export const createPasteFromClipboardExtension = <
             handleDOMEvents: {
               paste(_view, event) {
                 event.preventDefault();
+
+                if (!editor.isEditable) {
+                  return;
+                }
+
                 let format: (typeof acceptedMIMETypes)[number] | null = null;
 
                 for (const mimeType of acceptedMIMETypes) {

package/src/api/testUtil/cases/customBlocks.ts

@@ -259,6 +259,15 @@ export const customBlocksTestCases: EditorTestCases<
         },
       ],
     },
+    {
+      name: "customParagraph/lineBreaks",
+      blocks: [
+        {
+          type: "customParagraph",
+          content: "Line 1\nLine 2",
+        },
+      ],
+    },
     {
       name: "simpleCustomParagraph/basic",
       blocks: [

package/src/api/testUtil/cases/defaultSchema.ts

@@ -98,6 +98,15 @@ export const defaultSchemaTestCases: EditorTestCases<
         },
       ],
     },
+    {
+      name: "paragraph/lineBreaks",
+      blocks: [
+        {
+          type: "paragraph",
+          content: "Line 1\nLine 2",
+        },
+      ],
+    },
     {
       name: "lists/basic",
       blocks: [