@blocknote/core 0.8.2 → 0.8.3

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

@@ -4,7 +4,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex block to node 1`
 {
   "attrs": {
     "backgroundColor": "blue",
-    "id": "4",
+    "id": "1",
     "textColor": "yellow",
   },
   "content": [
@@ -46,7 +46,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex block to node 1`
         {
           "attrs": {
             "backgroundColor": "red",
-            "id": "5",
+            "id": "2",
             "textColor": "default",
           },
           "content": [
@@ -68,7 +68,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex block to node 1`
         {
           "attrs": {
             "backgroundColor": "default",
-            "id": "6",
+            "id": "3",
             "textColor": "default",
           },
           "content": [
@@ -154,7 +154,7 @@ exports[`Simple ProseMirror Node Conversions > Convert simple block to node 1`]
 {
   "attrs": {
     "backgroundColor": "default",
-    "id": "4",
+    "id": "1",
     "textColor": "default",
   },
   "content": [
@@ -173,7 +173,7 @@ exports[`Simple ProseMirror Node Conversions > Convert simple node to block 1`]
 {
   "children": [],
   "content": [],
-  "id": "0",
+  "id": "1",
   "props": {
     "backgroundColor": "default",
     "textAlignment": "left",
@@ -187,7 +187,7 @@ exports[`hard breaks > Convert a block with a hard break 1`] = `
 {
   "attrs": {
     "backgroundColor": "default",
-    "id": "4",
+    "id": "1",
     "textColor": "default",
   },
   "content": [
@@ -219,7 +219,7 @@ exports[`hard breaks > Convert a block with a hard break and different styles 1`
 {
   "attrs": {
     "backgroundColor": "default",
-    "id": "4",
+    "id": "1",
     "textColor": "default",
   },
   "content": [
@@ -256,7 +256,7 @@ exports[`hard breaks > Convert a block with a hard break at the end 1`] = `
 {
   "attrs": {
     "backgroundColor": "default",
-    "id": "4",
+    "id": "1",
     "textColor": "default",
   },
   "content": [
@@ -284,7 +284,7 @@ exports[`hard breaks > Convert a block with a hard break at the start 1`] = `
 {
   "attrs": {
     "backgroundColor": "default",
-    "id": "4",
+    "id": "1",
     "textColor": "default",
   },
   "content": [
@@ -312,7 +312,7 @@ exports[`hard breaks > Convert a block with a hard break between links 1`] = `
 {
   "attrs": {
     "backgroundColor": "default",
-    "id": "4",
+    "id": "1",
     "textColor": "default",
   },
   "content": [
@@ -364,7 +364,7 @@ exports[`hard breaks > Convert a block with a hard break in a link 1`] = `
 {
   "attrs": {
     "backgroundColor": "default",
-    "id": "4",
+    "id": "1",
     "textColor": "default",
   },
   "content": [
@@ -416,7 +416,7 @@ exports[`hard breaks > Convert a block with multiple hard breaks 1`] = `
 {
   "attrs": {
     "backgroundColor": "default",
-    "id": "4",
+    "id": "1",
     "textColor": "default",
   },
   "content": [
@@ -455,7 +455,7 @@ exports[`hard breaks > Convert a block with only a hard break 1`] = `
 {
   "attrs": {
     "backgroundColor": "default",
-    "id": "4",
+    "id": "1",
     "textColor": "default",
   },
   "content": [
@@ -479,7 +479,7 @@ exports[`links > Convert a block with link 1`] = `
 {
   "attrs": {
     "backgroundColor": "default",
-    "id": "4",
+    "id": "1",
     "textColor": "default",
   },
   "content": [
@@ -514,7 +514,7 @@ exports[`links > Convert two adjacent links in a block 1`] = `
 {
   "attrs": {
     "backgroundColor": "default",
-    "id": "4",
+    "id": "1",
     "textColor": "default",
   },
   "content": [

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

@@ -1,5 +1,4 @@
 import { Editor } from "@tiptap/core";
-import { Node } from "prosemirror-model";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { BlockNoteEditor, PartialBlock } from "../..";
 import UniqueID from "../../extensions/UniqueID/UniqueID";
@@ -13,98 +12,11 @@ import {
 let editor: BlockNoteEditor;
 let tt: Editor;
 
-let simpleBlock: PartialBlock<DefaultBlockSchema>;
-let simpleNode: Node;
-
-let complexBlock: PartialBlock<DefaultBlockSchema>;
-let complexNode: Node;
-
 beforeEach(() => {
   (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
 
   editor = new BlockNoteEditor();
   tt = editor._tiptapEditor;
-
-  simpleBlock = {
-    type: "paragraph",
-  };
-  simpleNode = tt.schema.nodes["blockContainer"].create(
-    { id: UniqueID.options.generateID() },
-    tt.schema.nodes["paragraph"].create()
-  );
-
-  complexBlock = {
-    type: "heading",
-    props: {
-      backgroundColor: "blue",
-      textColor: "yellow",
-      textAlignment: "right",
-      level: "2",
-    },
-    content: [
-      {
-        type: "text",
-        text: "Heading ",
-        styles: {
-          bold: true,
-          underline: true,
-        },
-      },
-      {
-        type: "text",
-        text: "2",
-        styles: {
-          italic: true,
-          strike: true,
-        },
-      },
-    ],
-    children: [
-      {
-        type: "paragraph",
-        props: {
-          backgroundColor: "red",
-        },
-        content: "Paragraph",
-        children: [],
-      },
-      {
-        type: "bulletListItem",
-      },
-    ],
-  };
-  complexNode = tt.schema.nodes["blockContainer"].create(
-    {
-      id: UniqueID.options.generateID(),
-      backgroundColor: "blue",
-      textColor: "yellow",
-    },
-    [
-      tt.schema.nodes["heading"].create(
-        { textAlignment: "right", level: "2" },
-        [
-          tt.schema.text("Heading ", [
-            tt.schema.mark("bold"),
-            tt.schema.mark("underline"),
-          ]),
-          tt.schema.text("2", [
-            tt.schema.mark("italic"),
-            tt.schema.mark("strike"),
-          ]),
-        ]
-      ),
-      tt.schema.nodes["blockGroup"].create({}, [
-        tt.schema.nodes["blockContainer"].create(
-          { id: UniqueID.options.generateID(), backgroundColor: "red" },
-          [tt.schema.nodes["paragraph"].create({}, tt.schema.text("Paragraph"))]
-        ),
-        tt.schema.nodes["blockContainer"].create(
-          { id: UniqueID.options.generateID() },
-          [tt.schema.nodes["bulletListItem"].create()]
-        ),
-      ]),
-    ]
-  );
 });
 
 afterEach(() => {
@@ -117,14 +29,21 @@ afterEach(() => {
 
 describe("Simple ProseMirror Node Conversions", () => {
   it("Convert simple block to node", async () => {
-    const firstNodeConversion = blockToNode(simpleBlock, tt.schema);
+    const block: PartialBlock = {
+      type: "paragraph",
+    };
+    const firstNodeConversion = blockToNode(block, tt.schema);
 
     expect(firstNodeConversion).toMatchSnapshot();
   });
 
   it("Convert simple node to block", async () => {
+    const node = tt.schema.nodes["blockContainer"].create(
+      { id: UniqueID.options.generateID() },
+      tt.schema.nodes["paragraph"].create()
+    );
     const firstBlockConversion = nodeToBlock<DefaultBlockSchema>(
-      simpleNode,
+      node,
       defaultBlockSchema
     );
 
@@ -132,20 +51,97 @@ describe("Simple ProseMirror Node Conversions", () => {
 
     const firstNodeConversion = blockToNode(firstBlockConversion, tt.schema);
 
-    expect(firstNodeConversion).toStrictEqual(simpleNode);
+    expect(firstNodeConversion).toStrictEqual(node);
   });
 });
 
 describe("Complex ProseMirror Node Conversions", () => {
   it("Convert complex block to node", async () => {
-    const firstNodeConversion = blockToNode(complexBlock, tt.schema);
+    const block: PartialBlock = {
+      type: "heading",
+      props: {
+        backgroundColor: "blue",
+        textColor: "yellow",
+        textAlignment: "right",
+        level: "2",
+      },
+      content: [
+        {
+          type: "text",
+          text: "Heading ",
+          styles: {
+            bold: true,
+            underline: true,
+          },
+        },
+        {
+          type: "text",
+          text: "2",
+          styles: {
+            italic: true,
+            strike: true,
+          },
+        },
+      ],
+      children: [
+        {
+          type: "paragraph",
+          props: {
+            backgroundColor: "red",
+          },
+          content: "Paragraph",
+          children: [],
+        },
+        {
+          type: "bulletListItem",
+        },
+      ],
+    };
+    const firstNodeConversion = blockToNode(block, tt.schema);
 
     expect(firstNodeConversion).toMatchSnapshot();
   });
 
   it("Convert complex node to block", async () => {
+    const node = tt.schema.nodes["blockContainer"].create(
+      {
+        id: UniqueID.options.generateID(),
+        backgroundColor: "blue",
+        textColor: "yellow",
+      },
+      [
+        tt.schema.nodes["heading"].create(
+          { textAlignment: "right", level: "2" },
+          [
+            tt.schema.text("Heading ", [
+              tt.schema.mark("bold"),
+              tt.schema.mark("underline"),
+            ]),
+            tt.schema.text("2", [
+              tt.schema.mark("italic"),
+              tt.schema.mark("strike"),
+            ]),
+          ]
+        ),
+        tt.schema.nodes["blockGroup"].create({}, [
+          tt.schema.nodes["blockContainer"].create(
+            { id: UniqueID.options.generateID(), backgroundColor: "red" },
+            [
+              tt.schema.nodes["paragraph"].create(
+                {},
+                tt.schema.text("Paragraph")
+              ),
+            ]
+          ),
+          tt.schema.nodes["blockContainer"].create(
+            { id: UniqueID.options.generateID() },
+            [tt.schema.nodes["bulletListItem"].create()]
+          ),
+        ]),
+      ]
+    );
     const firstBlockConversion = nodeToBlock<DefaultBlockSchema>(
-      complexNode,
+      node,
       defaultBlockSchema
     );
 
@@ -153,7 +149,7 @@ describe("Complex ProseMirror Node Conversions", () => {
 
     const firstNodeConversion = blockToNode(firstBlockConversion, tt.schema);
 
-    expect(firstNodeConversion).toStrictEqual(complexNode);
+    expect(firstNodeConversion).toStrictEqual(node);
   });
 });
 

package/src/extensions/Blocks/api/blockTypes.ts

@@ -2,6 +2,7 @@
 import { Node, NodeConfig } from "@tiptap/core";
 import { BlockNoteEditor } from "../../../BlockNoteEditor";
 import { InlineContent, PartialInlineContent } from "./inlineContentTypes";
+import { DefaultBlockSchema } from "./defaultBlocks";
 
 // A configuration for a TipTap node, but with stricter type constraints on the
 // "name" and "group" properties. The "name" property is now always a string
@@ -143,7 +144,7 @@ type BlocksWithoutChildren<BSchema extends BlockSchema> = {
 
 // Converts each block spec into a Block object without children, merges them
 // into a union type, and adds a children property
-export type Block<BSchema extends BlockSchema> =
+export type Block<BSchema extends BlockSchema = DefaultBlockSchema> =
   BlocksWithoutChildren<BSchema>[keyof BlocksWithoutChildren<BSchema>] & {
     children: Block<BSchema>[];
   };
@@ -168,7 +169,7 @@ type PartialBlocksWithoutChildren<BSchema extends BlockSchema> = {
 
 // Same as Block, but as a partial type with some changes to make it easier to
 // create/update blocks in the editor.
-export type PartialBlock<BSchema extends BlockSchema> =
+export type PartialBlock<BSchema extends BlockSchema = DefaultBlockSchema> =
   PartialBlocksWithoutChildren<BSchema>[keyof PartialBlocksWithoutChildren<BSchema>] &
     Partial<{
       children: PartialBlock<BSchema>[];

package/src/extensions/Blocks/helpers/getBlockInfoFromPos.ts

@@ -26,6 +26,12 @@ export function getBlockInfoFromPos(
     return undefined;
   }
 
+  // This gets triggered when a node selection on a block is active, i.e. when
+  // you drag and drop a block.
+  if (doc.resolve(posInBlock).parent.type.name === "blockGroup") {
+    posInBlock++;
+  }
+
   const $pos = doc.resolve(posInBlock);
 
   const maxDepth = $pos.depth;