@blocknote/core 0.15.11 → 0.17.0

package/src/api/blockManipulation/commands/mergeBlocks/mergeBlocks.test.ts

@@ -0,0 +1,131 @@
+import { describe, expect, it } from "vitest";
+
+import { getBlockInfoFromSelection } from "../../../getBlockInfoFromPos.js";
+import { setupTestEnv } from "../../setupTestEnv.js";
+import { mergeBlocksCommand } from "./mergeBlocks.js";
+
+const getEditor = setupTestEnv();
+
+function mergeBlocks(posBetweenBlocks: number) {
+  return getEditor()._tiptapEditor.commands.command(
+    mergeBlocksCommand(posBetweenBlocks)
+  );
+}
+
+function getPosBeforeSelectedBlock() {
+  return getBlockInfoFromSelection(getEditor()._tiptapEditor.state)
+    .blockContainer.beforePos;
+}
+
+describe("Test mergeBlocks", () => {
+  it("Basic", () => {
+    getEditor().setTextCursorPosition("paragraph-1");
+
+    mergeBlocks(getPosBeforeSelectedBlock());
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("First block has children", () => {
+    getEditor().setTextCursorPosition("paragraph-2");
+
+    mergeBlocks(getPosBeforeSelectedBlock());
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Second block has children", () => {
+    getEditor().setTextCursorPosition("paragraph-with-children");
+
+    mergeBlocks(getPosBeforeSelectedBlock());
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Second block is empty", () => {
+    getEditor().setTextCursorPosition("empty-paragraph");
+
+    mergeBlocks(getPosBeforeSelectedBlock());
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Blocks have different types", () => {
+    getEditor().setTextCursorPosition("paragraph-5");
+
+    mergeBlocks(getPosBeforeSelectedBlock());
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Selection is updated", () => {
+    getEditor().setTextCursorPosition("paragraph-0", "end");
+
+    const firstBlockEndOffset =
+      getEditor()._tiptapEditor.state.selection.$anchor.parentOffset;
+
+    getEditor().setTextCursorPosition("paragraph-1");
+
+    mergeBlocks(getPosBeforeSelectedBlock());
+
+    const anchorIsAtOldFirstBlockEndPos =
+      getEditor()._tiptapEditor.state.selection.$anchor.parentOffset ===
+      firstBlockEndOffset;
+
+    expect(anchorIsAtOldFirstBlockEndPos).toBeTruthy();
+  });
+
+  // We expect a no-op for each of the remaining tests as merging should only
+  // happen for blocks which both have inline content. We also expect
+  // `mergeBlocks` to return false as TipTap commands should do that instead of
+  // throwing an error, when the command cannot be executed.
+  it("First block is empty", () => {
+    getEditor().setTextCursorPosition("paragraph-8");
+
+    const originalDocument = getEditor().document;
+    const ret = mergeBlocks(getPosBeforeSelectedBlock());
+
+    expect(getEditor().document).toEqual(originalDocument);
+    expect(ret).toBeFalsy();
+  });
+
+  it("Inline content & no content", () => {
+    getEditor().setTextCursorPosition("image-0");
+
+    const originalDocument = getEditor().document;
+    const ret = mergeBlocks(getPosBeforeSelectedBlock());
+
+    expect(getEditor().document).toEqual(originalDocument);
+    expect(ret).toBeFalsy();
+  });
+
+  it("Inline content & table content", () => {
+    getEditor().setTextCursorPosition("table-0");
+
+    const originalDocument = getEditor().document;
+    const ret = mergeBlocks(getPosBeforeSelectedBlock());
+
+    expect(getEditor().document).toEqual(originalDocument);
+    expect(ret).toBeFalsy();
+  });
+
+  it("No content & inline content", () => {
+    getEditor().setTextCursorPosition("paragraph-6");
+
+    const originalDocument = getEditor().document;
+    const ret = mergeBlocks(getPosBeforeSelectedBlock());
+
+    expect(getEditor().document).toEqual(originalDocument);
+    expect(ret).toBeFalsy();
+  });
+
+  it("Table content & inline content", () => {
+    getEditor().setTextCursorPosition("paragraph-7");
+
+    const originalDocument = getEditor().document;
+    const ret = mergeBlocks(getPosBeforeSelectedBlock());
+
+    expect(getEditor().document).toEqual(originalDocument);
+    expect(ret).toBeFalsy();
+  });
+});

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

@@ -0,0 +1,103 @@
+import { Node, ResolvedPos } from "prosemirror-model";
+import { EditorState } from "prosemirror-state";
+
+import { getBlockInfoFromResolvedPos } from "../../../getBlockInfoFromPos.js";
+
+export const getPrevBlockPos = (doc: Node, $nextBlockPos: ResolvedPos) => {
+  const prevNode = $nextBlockPos.nodeBefore;
+
+  if (!prevNode) {
+    throw new Error(
+      `Attempted to get previous blockContainer node for merge at position ${$nextBlockPos.pos} but a previous node does not exist`
+    );
+  }
+
+  // Finds the nearest previous block, regardless of nesting level.
+  let prevBlockBeforePos = $nextBlockPos.posAtIndex($nextBlockPos.index() - 1);
+  let prevBlockInfo = getBlockInfoFromResolvedPos(
+    doc.resolve(prevBlockBeforePos)
+  );
+
+  while (prevBlockInfo.blockGroup) {
+    const group = prevBlockInfo.blockGroup.node;
+
+    prevBlockBeforePos = doc
+      .resolve(prevBlockInfo.blockGroup.beforePos + 1)
+      .posAtIndex(group.childCount - 1);
+    prevBlockInfo = getBlockInfoFromResolvedPos(
+      doc.resolve(prevBlockBeforePos)
+    );
+  }
+
+  return doc.resolve(prevBlockBeforePos);
+};
+
+const canMerge = ($prevBlockPos: ResolvedPos, $nextBlockPos: ResolvedPos) => {
+  const prevBlockInfo = getBlockInfoFromResolvedPos($prevBlockPos);
+  const nextBlockInfo = getBlockInfoFromResolvedPos($nextBlockPos);
+
+  return (
+    prevBlockInfo.blockContent.node.type.spec.content === "inline*" &&
+    nextBlockInfo.blockContent.node.type.spec.content === "inline*" &&
+    prevBlockInfo.blockContent.node.childCount > 0
+  );
+};
+
+const mergeBlocks = (
+  state: EditorState,
+  dispatch: ((args?: any) => any) | undefined,
+  $prevBlockPos: ResolvedPos,
+  $nextBlockPos: ResolvedPos
+) => {
+  const nextBlockInfo = getBlockInfoFromResolvedPos($nextBlockPos);
+
+  // Un-nests all children of the next block.
+  if (nextBlockInfo.blockGroup) {
+    const childBlocksStart = state.doc.resolve(
+      nextBlockInfo.blockGroup.beforePos + 1
+    );
+    const childBlocksEnd = state.doc.resolve(
+      nextBlockInfo.blockGroup.afterPos - 1
+    );
+    const childBlocksRange = childBlocksStart.blockRange(childBlocksEnd);
+
+    if (dispatch) {
+      state.tr.lift(childBlocksRange!, $nextBlockPos.depth);
+    }
+  }
+
+  // Deletes the boundary between the two blocks. Can be thought of as
+  // removing the closing tags of the first block and the opening tags of the
+  // second one to stitch them together.
+  if (dispatch) {
+    const prevBlockInfo = getBlockInfoFromResolvedPos($prevBlockPos);
+
+    dispatch(
+      state.tr.delete(
+        prevBlockInfo.blockContent.afterPos - 1,
+        nextBlockInfo.blockContent.beforePos + 1
+      )
+    );
+  }
+
+  return true;
+};
+
+export const mergeBlocksCommand =
+  (posBetweenBlocks: number) =>
+  ({
+    state,
+    dispatch,
+  }: {
+    state: EditorState;
+    dispatch: ((args?: any) => any) | undefined;
+  }) => {
+    const $nextBlockPos = state.doc.resolve(posBetweenBlocks);
+    const $prevBlockPos = getPrevBlockPos(state.doc, $nextBlockPos);
+
+    if (!canMerge($prevBlockPos, $nextBlockPos)) {
+      return false;
+    }
+
+    return mergeBlocks(state, dispatch, $prevBlockPos, $nextBlockPos);
+  };