@blocknote/core 0.33.0 → 0.35.0

package/src/api/__snapshots__/blocks-moved-to-different-parent.json

@@ -0,0 +1,78 @@
+[
+  {
+    "block": {
+      "children": [],
+      "content": [
+        {
+          "styles": {},
+          "text": "Child 1",
+          "type": "text",
+        },
+      ],
+      "id": "child-1",
+      "props": {
+        "backgroundColor": "default",
+        "textAlignment": "left",
+        "textColor": "default",
+      },
+      "type": "paragraph",
+    },
+    "currentParent": undefined,
+    "prevBlock": {
+      "children": [],
+      "content": [
+        {
+          "styles": {},
+          "text": "Child 1",
+          "type": "text",
+        },
+      ],
+      "id": "child-1",
+      "props": {
+        "backgroundColor": "default",
+        "textAlignment": "left",
+        "textColor": "default",
+      },
+      "type": "paragraph",
+    },
+    "prevParent": {
+      "children": [
+        {
+          "children": [],
+          "content": [
+            {
+              "styles": {},
+              "text": "Child 1",
+              "type": "text",
+            },
+          ],
+          "id": "child-1",
+          "props": {
+            "backgroundColor": "default",
+            "textAlignment": "left",
+            "textColor": "default",
+          },
+          "type": "paragraph",
+        },
+      ],
+      "content": [
+        {
+          "styles": {},
+          "text": "Parent 1",
+          "type": "text",
+        },
+      ],
+      "id": "parent-1",
+      "props": {
+        "backgroundColor": "default",
+        "textAlignment": "left",
+        "textColor": "default",
+      },
+      "type": "paragraph",
+    },
+    "source": {
+      "type": "local",
+    },
+    "type": "move",
+  },
+]

package/src/api/__snapshots__/blocks-moved-to-root-level.json

@@ -0,0 +1,78 @@
+[
+  {
+    "block": {
+      "children": [],
+      "content": [
+        {
+          "styles": {},
+          "text": "Child",
+          "type": "text",
+        },
+      ],
+      "id": "child",
+      "props": {
+        "backgroundColor": "default",
+        "textAlignment": "left",
+        "textColor": "default",
+      },
+      "type": "paragraph",
+    },
+    "currentParent": undefined,
+    "prevBlock": {
+      "children": [],
+      "content": [
+        {
+          "styles": {},
+          "text": "Child",
+          "type": "text",
+        },
+      ],
+      "id": "child",
+      "props": {
+        "backgroundColor": "default",
+        "textAlignment": "left",
+        "textColor": "default",
+      },
+      "type": "paragraph",
+    },
+    "prevParent": {
+      "children": [
+        {
+          "children": [],
+          "content": [
+            {
+              "styles": {},
+              "text": "Child",
+              "type": "text",
+            },
+          ],
+          "id": "child",
+          "props": {
+            "backgroundColor": "default",
+            "textAlignment": "left",
+            "textColor": "default",
+          },
+          "type": "paragraph",
+        },
+      ],
+      "content": [
+        {
+          "styles": {},
+          "text": "Parent",
+          "type": "text",
+        },
+      ],
+      "id": "parent",
+      "props": {
+        "backgroundColor": "default",
+        "textAlignment": "left",
+        "textColor": "default",
+      },
+      "type": "paragraph",
+    },
+    "source": {
+      "type": "local",
+    },
+    "type": "move",
+  },
+]

package/src/api/__snapshots__/blocks-outdented-changed.json

@@ -0,0 +1,129 @@
+[
+  {
+    "block": {
+      "children": [],
+      "content": [
+        {
+          "styles": {},
+          "text": "C",
+          "type": "text",
+        },
+      ],
+      "id": "double-nested-paragraph-0",
+      "props": {
+        "backgroundColor": "default",
+        "textAlignment": "left",
+        "textColor": "default",
+      },
+      "type": "paragraph",
+    },
+    "currentParent": {
+      "children": [
+        {
+          "children": [],
+          "content": [
+            {
+              "styles": {},
+              "text": "B",
+              "type": "text",
+            },
+          ],
+          "id": "nested-paragraph-0",
+          "props": {
+            "backgroundColor": "default",
+            "textAlignment": "left",
+            "textColor": "default",
+          },
+          "type": "paragraph",
+        },
+        {
+          "children": [],
+          "content": [
+            {
+              "styles": {},
+              "text": "C",
+              "type": "text",
+            },
+          ],
+          "id": "double-nested-paragraph-0",
+          "props": {
+            "backgroundColor": "default",
+            "textAlignment": "left",
+            "textColor": "default",
+          },
+          "type": "paragraph",
+        },
+      ],
+      "content": [
+        {
+          "styles": {},
+          "text": "A",
+          "type": "text",
+        },
+      ],
+      "id": "paragraph-with-children",
+      "props": {
+        "backgroundColor": "default",
+        "textAlignment": "left",
+        "textColor": "default",
+      },
+      "type": "paragraph",
+    },
+    "prevBlock": {
+      "children": [],
+      "content": [
+        {
+          "styles": {},
+          "text": "C",
+          "type": "text",
+        },
+      ],
+      "id": "double-nested-paragraph-0",
+      "props": {
+        "backgroundColor": "default",
+        "textAlignment": "left",
+        "textColor": "default",
+      },
+      "type": "paragraph",
+    },
+    "prevParent": {
+      "children": [
+        {
+          "children": [],
+          "content": [
+            {
+              "styles": {},
+              "text": "C",
+              "type": "text",
+            },
+          ],
+          "id": "double-nested-paragraph-0",
+          "props": {
+            "backgroundColor": "default",
+            "textAlignment": "left",
+            "textColor": "default",
+          },
+          "type": "paragraph",
+        },
+      ],
+      "content": [
+        {
+          "styles": {},
+          "text": "B",
+          "type": "text",
+        },
+      ],
+      "id": "nested-paragraph-0",
+      "props": {
+        "backgroundColor": "default",
+        "textAlignment": "left",
+        "textColor": "default",
+      },
+      "type": "paragraph",
+    },
+    "source": {
+      "type": "local",
+    },
+    "type": "move",
+  },
+]

package/src/api/blockManipulation/commands/nestBlock/nestBlock.ts

@@ -1,5 +1,5 @@
 import { Fragment, NodeType, Slice } from "prosemirror-model";
-import { EditorState, Transaction } from "prosemirror-state";
+import { Transaction } from "prosemirror-state";
 import { ReplaceAroundStep } from "prosemirror-transform";
 
 import { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
@@ -11,68 +11,67 @@ import { getBlockInfoFromTransaction } from "../../../getBlockInfoFromPos.js";
  *
  * The original function derives too many information from the parentnode and itemtype
  */
-function sinkListItem(itemType: NodeType, groupType: NodeType) {
-  return function (state: EditorState, dispatch?: (tr: Transaction) => void) {
-    const { $from, $to } = state.selection;
-    const range = $from.blockRange(
-      $to,
-      (node) =>
-        node.childCount > 0 &&
-        (node.type.name === "blockGroup" || node.type.name === "column"), // change necessary to not look at first item child type
-    );
-    if (!range) {
-      return false;
-    }
-    const startIndex = range.startIndex;
-    if (startIndex === 0) {
-      return false;
-    }
-    const parent = range.parent;
-    const nodeBefore = parent.child(startIndex - 1);
-    if (nodeBefore.type !== itemType) {
-      return false;
-    }
-    if (dispatch) {
-      const nestedBefore =
-        nodeBefore.lastChild && nodeBefore.lastChild.type === groupType; // change necessary to check groupType instead of parent.type
-      const inner = Fragment.from(nestedBefore ? itemType.create() : null);
-      const slice = new Slice(
-        Fragment.from(
-          itemType.create(null, Fragment.from(groupType.create(null, inner))), // change necessary to create "groupType" instead of parent.type
-        ),
-        nestedBefore ? 3 : 1,
-        0,
-      );
+function sinkListItem(
+  tr: Transaction,
+  itemType: NodeType,
+  groupType: NodeType,
+) {
+  const { $from, $to } = tr.selection;
+  const range = $from.blockRange(
+    $to,
+    (node) =>
+      node.childCount > 0 &&
+      (node.type.name === "blockGroup" || node.type.name === "column"), // change necessary to not look at first item child type
+  );
+  if (!range) {
+    return false;
+  }
+  const startIndex = range.startIndex;
+  if (startIndex === 0) {
+    return false;
+  }
+  const parent = range.parent;
+  const nodeBefore = parent.child(startIndex - 1);
+  if (nodeBefore.type !== itemType) {
+    return false;
+  }
+  const nestedBefore =
+    nodeBefore.lastChild && nodeBefore.lastChild.type === groupType; // change necessary to check groupType instead of parent.type
+  const inner = Fragment.from(nestedBefore ? itemType.create() : null);
+  const slice = new Slice(
+    Fragment.from(
+      itemType.create(null, Fragment.from(groupType.create(null, inner))), // change necessary to create "groupType" instead of parent.type
+    ),
+    nestedBefore ? 3 : 1,
+    0,
+  );
+
+  const before = range.start;
+  const after = range.end;
+
+  tr.step(
+    new ReplaceAroundStep(
+      before - (nestedBefore ? 3 : 1),
+      after,
+      before,
+      after,
+      slice,
+      1,
+      true,
+    ),
+  ).scrollIntoView();
 
-      const before = range.start;
-      const after = range.end;
-      dispatch(
-        state.tr
-          .step(
-            new ReplaceAroundStep(
-              before - (nestedBefore ? 3 : 1),
-              after,
-              before,
-              after,
-              slice,
-              1,
-              true,
-            ),
-          )
-          .scrollIntoView(),
-      );
-    }
-    return true;
-  };
+  return true;
 }
 
 export function nestBlock(editor: BlockNoteEditor<any, any, any>) {
-  return editor.exec((state, dispatch) =>
-    sinkListItem(
-      state.schema.nodes["blockContainer"],
-      state.schema.nodes["blockGroup"],
-    )(state, dispatch),
-  );
+  return editor.transact((tr) => {
+    return sinkListItem(
+      tr,
+      editor.pmSchema.nodes["blockContainer"],
+      editor.pmSchema.nodes["blockGroup"],
+    );
+  });
 }
 
 export function unnestBlock(editor: BlockNoteEditor<any, any, any>) {

package/src/api/clipboard/fromClipboard/handleFileInsertion.ts

@@ -49,6 +49,7 @@ function insertOrUpdateBlock<
   editor: BlockNoteEditor<BSchema, I, S>,
   referenceBlock: Block<BSchema, I, S>,
   newBlock: PartialBlock<BSchema, I, S>,
+  placement: "before" | "after" = "after",
 ) {
   let insertedBlockId: string | undefined;
 
@@ -61,7 +62,7 @@ function insertOrUpdateBlock<
     insertedBlockId = editor.insertBlocks(
       [newBlock],
       referenceBlock,
-      "after",
+      placement,
     )[0].id;
   }
 
@@ -156,16 +157,26 @@ export async function handleFileInsertion<
         };
 
         const pos = editor.prosemirrorView?.posAtCoords(coords);
+
         if (!pos) {
           return;
         }
 
         insertedBlockId = editor.transact((tr) => {
           const posInfo = getNearestBlockPos(tr.doc, pos.pos);
+          const blockElement = editor.prosemirrorView?.dom.querySelector(
+            `[data-id="${posInfo.node.attrs.id}"]`,
+          );
+
+          const blockRect = blockElement?.getBoundingClientRect();
+
           return insertOrUpdateBlock(
             editor,
             editor.getBlock(posInfo.node.attrs.id)!,
             fileBlock,
+            blockRect && (blockRect.top + blockRect.bottom) / 2 > coords.top
+              ? "before"
+              : "after",
           );
         });
       } else {

package/src/api/nodeUtil.test.ts

@@ -6,7 +6,7 @@ import { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
 
 const getEditor = setupTestEnv();
 
-describe("Test getBlocksChangedByTransaction", () => {
+describe("getBlocksChangedByTransaction", () => {
   let editor: BlockNoteEditor;
 
   beforeEach(() => {
@@ -225,4 +225,231 @@ describe("Test getBlocksChangedByTransaction", () => {
       "__snapshots__/blocks-updated-content-inserted.json",
     );
   });
+
+  it("should return blocks which have been indented", async () => {
+    editor.replaceBlocks(editor.document, [
+      {
+        id: "paragraph-with-children",
+        type: "paragraph",
+        content: "A",
+        children: [
+          {
+            id: "nested-paragraph-0",
+            type: "paragraph",
+            content: "B",
+            children: [],
+          },
+          {
+            id: "double-nested-paragraph-0",
+            type: "paragraph",
+            content: "C",
+          },
+        ],
+      },
+    ]);
+    const blocksChanged = editor.transact((tr) => {
+      editor.setTextCursorPosition("double-nested-paragraph-0", "start");
+      editor.nestBlock();
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-indented-changed.json",
+    );
+  });
+
+  it("should return blocks which have been outdented", async () => {
+    editor.replaceBlocks(editor.document, [
+      {
+        id: "paragraph-with-children",
+        type: "paragraph",
+        content: "A",
+        children: [
+          {
+            id: "nested-paragraph-0",
+            type: "paragraph",
+            content: "B",
+            children: [
+              {
+                id: "double-nested-paragraph-0",
+                type: "paragraph",
+                content: "C",
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+
+    // This test is different from the other tests because it uses the onChange hook to get the blocks changed
+    // This is because unnesting a block is not allowed within a transaction
+    let blocksChanged: any = null;
+    const unsubscribe = editor.onChange((_e, { getChanges }) => {
+      blocksChanged = getChanges();
+    });
+
+    // Make the change
+    editor.setTextCursorPosition("double-nested-paragraph-0", "start");
+    editor.unnestBlock();
+
+    // Clean up
+    if (unsubscribe) {
+      unsubscribe();
+    }
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-outdented-changed.json",
+    );
+  });
+
+  it("should return blocks which have been moved to a different parent", async () => {
+    editor.replaceBlocks(editor.document, [
+      {
+        id: "parent-1",
+        type: "paragraph",
+        content: "Parent 1",
+        children: [
+          {
+            id: "child-1",
+            type: "paragraph",
+            content: "Child 1",
+          },
+        ],
+      },
+      {
+        id: "parent-2",
+        type: "paragraph",
+        content: "Parent 2",
+        children: [],
+      },
+    ]);
+
+    const blocksChanged = editor.transact((tr) => {
+      const childBlock = editor.getBlock("child-1");
+      editor.removeBlocks(["child-1"]);
+      editor.insertBlocks([{ ...childBlock }], "parent-2", "after");
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-moved-to-different-parent.json",
+    );
+  });
+
+  it("should return blocks which have been moved to root level", async () => {
+    editor.replaceBlocks(editor.document, [
+      {
+        id: "parent",
+        type: "paragraph",
+        content: "Parent",
+        children: [
+          {
+            id: "child",
+            type: "paragraph",
+            content: "Child",
+          },
+        ],
+      },
+    ]);
+
+    const blocksChanged = editor.transact((tr) => {
+      const childBlock = editor.getBlock("child");
+      editor.removeBlocks(["child"]);
+      editor.insertBlocks([{ ...childBlock }], "parent", "after");
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-moved-to-root-level.json",
+    );
+  });
+
+  it("should return blocks which have been moved deeper into nesting", async () => {
+    editor.replaceBlocks(editor.document, [
+      {
+        id: "root",
+        type: "paragraph",
+        content: "Root",
+        children: [
+          {
+            id: "level-1",
+            type: "paragraph",
+            content: "Level 1",
+            children: [
+              {
+                id: "level-2",
+                type: "paragraph",
+                content: "Level 2",
+              },
+            ],
+          },
+          {
+            id: "target",
+            type: "paragraph",
+            content: "Target",
+          },
+        ],
+      },
+    ]);
+
+    const blocksChanged = editor.transact((tr) => {
+      const targetBlock = editor.getBlock("target");
+      editor.removeBlocks(["target"]);
+      editor.insertBlocks([{ ...targetBlock }], "level-2", "after");
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-moved-deeper-into-nesting.json",
+    );
+  });
+
+  it("should return multiple blocks when multiple blocks are moved in the same transaction", async () => {
+    editor.replaceBlocks(editor.document, [
+      {
+        id: "parent-1",
+        type: "paragraph",
+        content: "Parent 1",
+        children: [
+          {
+            id: "child-1",
+            type: "paragraph",
+            content: "Child 1",
+          },
+          {
+            id: "child-2",
+            type: "paragraph",
+            content: "Child 2",
+          },
+        ],
+      },
+      {
+        id: "parent-2",
+        type: "paragraph",
+        content: "Parent 2",
+        children: [],
+      },
+    ]);
+
+    const blocksChanged = editor.transact((tr) => {
+      const child1Block = editor.getBlock("child-1");
+      const child2Block = editor.getBlock("child-2");
+      editor.removeBlocks(["child-1", "child-2"]);
+      editor.insertBlocks(
+        [{ ...child1Block }, { ...child2Block }],
+        "parent-2",
+        "after",
+      );
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-moved-multiple-in-same-transaction.json",
+    );
+  });
 });