@blocknote/core 0.16.0 → 0.17.1

package/src/api/blockManipulation/selections/textCursorPosition/__snapshots__/textCursorPosition.test.ts.snap

@@ -0,0 +1,316 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Test getTextCursorPosition & setTextCursorPosition > Basic 1`] = `
+{
+  "block": {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Paragraph 1",
+        "type": "text",
+      },
+    ],
+    "id": "paragraph-1",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  "nextBlock": {
+    "children": [
+      {
+        "children": [
+          {
+            "children": [],
+            "content": [
+              {
+                "styles": {},
+                "text": "Double Nested Paragraph 0",
+                "type": "text",
+              },
+            ],
+            "id": "double-nested-paragraph-0",
+            "props": {
+              "backgroundColor": "default",
+              "textAlignment": "left",
+              "textColor": "default",
+            },
+            "type": "paragraph",
+          },
+        ],
+        "content": [
+          {
+            "styles": {},
+            "text": "Nested Paragraph 0",
+            "type": "text",
+          },
+        ],
+        "id": "nested-paragraph-0",
+        "props": {
+          "backgroundColor": "default",
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "type": "paragraph",
+      },
+    ],
+    "content": [
+      {
+        "styles": {},
+        "text": "Paragraph with children",
+        "type": "text",
+      },
+    ],
+    "id": "paragraph-with-children",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  "parentBlock": undefined,
+  "prevBlock": {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Paragraph 0",
+        "type": "text",
+      },
+    ],
+    "id": "paragraph-0",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+}
+`;
+
+exports[`Test getTextCursorPosition & setTextCursorPosition > First block 1`] = `
+{
+  "block": {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Paragraph 0",
+        "type": "text",
+      },
+    ],
+    "id": "paragraph-0",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  "nextBlock": {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Paragraph 1",
+        "type": "text",
+      },
+    ],
+    "id": "paragraph-1",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  "parentBlock": undefined,
+  "prevBlock": undefined,
+}
+`;
+
+exports[`Test getTextCursorPosition & setTextCursorPosition > Last block 1`] = `
+{
+  "block": {
+    "children": [],
+    "content": [],
+    "id": "trailing-paragraph",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  "nextBlock": undefined,
+  "parentBlock": undefined,
+  "prevBlock": {
+    "children": [
+      {
+        "children": [
+          {
+            "children": [],
+            "content": [
+              {
+                "styles": {},
+                "text": "Double Nested Paragraph 1",
+                "type": "text",
+              },
+            ],
+            "id": "double-nested-paragraph-1",
+            "props": {
+              "backgroundColor": "default",
+              "textAlignment": "left",
+              "textColor": "default",
+            },
+            "type": "paragraph",
+          },
+        ],
+        "content": [
+          {
+            "styles": {},
+            "text": "Nested Paragraph 1",
+            "type": "text",
+          },
+        ],
+        "id": "nested-paragraph-1",
+        "props": {
+          "backgroundColor": "default",
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "type": "paragraph",
+      },
+    ],
+    "content": [
+      {
+        "styles": {
+          "bold": true,
+        },
+        "text": "Heading",
+        "type": "text",
+      },
+      {
+        "styles": {},
+        "text": " with styled ",
+        "type": "text",
+      },
+      {
+        "styles": {
+          "italic": true,
+        },
+        "text": "content",
+        "type": "text",
+      },
+    ],
+    "id": "heading-with-everything",
+    "props": {
+      "backgroundColor": "red",
+      "level": 2,
+      "textAlignment": "center",
+      "textColor": "red",
+    },
+    "type": "heading",
+  },
+}
+`;
+
+exports[`Test getTextCursorPosition & setTextCursorPosition > Nested block 1`] = `
+{
+  "block": {
+    "children": [
+      {
+        "children": [],
+        "content": [
+          {
+            "styles": {},
+            "text": "Double Nested Paragraph 0",
+            "type": "text",
+          },
+        ],
+        "id": "double-nested-paragraph-0",
+        "props": {
+          "backgroundColor": "default",
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "type": "paragraph",
+      },
+    ],
+    "content": [
+      {
+        "styles": {},
+        "text": "Nested Paragraph 0",
+        "type": "text",
+      },
+    ],
+    "id": "nested-paragraph-0",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  "nextBlock": undefined,
+  "parentBlock": {
+    "children": [
+      {
+        "children": [
+          {
+            "children": [],
+            "content": [
+              {
+                "styles": {},
+                "text": "Double Nested Paragraph 0",
+                "type": "text",
+              },
+            ],
+            "id": "double-nested-paragraph-0",
+            "props": {
+              "backgroundColor": "default",
+              "textAlignment": "left",
+              "textColor": "default",
+            },
+            "type": "paragraph",
+          },
+        ],
+        "content": [
+          {
+            "styles": {},
+            "text": "Nested Paragraph 0",
+            "type": "text",
+          },
+        ],
+        "id": "nested-paragraph-0",
+        "props": {
+          "backgroundColor": "default",
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "type": "paragraph",
+      },
+    ],
+    "content": [
+      {
+        "styles": {},
+        "text": "Paragraph with children",
+        "type": "text",
+      },
+    ],
+    "id": "paragraph-with-children",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  "prevBlock": undefined,
+}
+`;

package/src/api/blockManipulation/selections/textCursorPosition/textCursorPosition.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+
+import { setupTestEnv } from "../../setupTestEnv.js";
+import {
+  getTextCursorPosition,
+  setTextCursorPosition,
+} from "./textCursorPosition.js";
+
+const getEditor = setupTestEnv();
+
+describe("Test getTextCursorPosition & setTextCursorPosition", () => {
+  it("Basic", () => {
+    setTextCursorPosition(getEditor(), "paragraph-1");
+
+    expect(getTextCursorPosition(getEditor())).toMatchSnapshot();
+  });
+
+  it("First block", () => {
+    setTextCursorPosition(getEditor(), "paragraph-0");
+
+    expect(getTextCursorPosition(getEditor())).toMatchSnapshot();
+  });
+
+  it("Last block", () => {
+    setTextCursorPosition(getEditor(), "trailing-paragraph");
+
+    expect(getTextCursorPosition(getEditor())).toMatchSnapshot();
+  });
+
+  it("Nested block", () => {
+    setTextCursorPosition(getEditor(), "nested-paragraph-0");
+
+    expect(getTextCursorPosition(getEditor())).toMatchSnapshot();
+  });
+
+  it("Set to start", () => {
+    setTextCursorPosition(getEditor(), "paragraph-1", "start");
+
+    expect(
+      getEditor()._tiptapEditor.state.selection.$from.parentOffset === 0
+    ).toBeTruthy();
+  });
+
+  it("Set to end", () => {
+    setTextCursorPosition(getEditor(), "paragraph-1", "end");
+
+    expect(
+      getEditor()._tiptapEditor.state.selection.$from.parentOffset ===
+        getEditor()._tiptapEditor.state.selection.$from.node().firstChild!
+          .nodeSize
+    ).toBeTruthy();
+  });
+});

package/src/api/blockManipulation/selections/textCursorPosition/textCursorPosition.ts

@@ -0,0 +1,130 @@
+import { Node } from "prosemirror-model";
+
+import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
+import { TextCursorPosition } from "../../../../editor/cursorPositionTypes.js";
+import {
+  BlockIdentifier,
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../../schema/index.js";
+import { UnreachableCaseError } from "../../../../util/typescript.js";
+import {
+  getBlockInfo,
+  getBlockInfoFromSelection,
+} from "../../../getBlockInfoFromPos.js";
+import { nodeToBlock } from "../../../nodeConversions/nodeToBlock.js";
+import { getNodeById } from "../../../nodeUtil.js";
+
+export function getTextCursorPosition<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(editor: BlockNoteEditor<BSchema, I, S>): TextCursorPosition<BSchema, I, S> {
+  const { blockContainer } = getBlockInfoFromSelection(
+    editor._tiptapEditor.state
+  );
+
+  const resolvedPos = editor._tiptapEditor.state.doc.resolve(
+    blockContainer.beforePos
+  );
+  // Gets previous blockContainer node at the same nesting level, if the current node isn't the first child.
+  const prevNode = resolvedPos.nodeBefore;
+
+  // Gets next blockContainer node at the same nesting level, if the current node isn't the last child.
+  const nextNode = editor._tiptapEditor.state.doc.resolve(
+    blockContainer.afterPos
+  ).nodeAfter;
+
+  // Gets parent blockContainer node, if the current node is nested.
+  let parentNode: Node | undefined = undefined;
+  if (resolvedPos.depth > 1) {
+    parentNode = resolvedPos.node(resolvedPos.depth - 1);
+  }
+
+  return {
+    block: nodeToBlock(
+      blockContainer.node,
+      editor.schema.blockSchema,
+      editor.schema.inlineContentSchema,
+      editor.schema.styleSchema,
+      editor.blockCache
+    ),
+    prevBlock:
+      prevNode === null
+        ? undefined
+        : nodeToBlock(
+            prevNode,
+            editor.schema.blockSchema,
+            editor.schema.inlineContentSchema,
+            editor.schema.styleSchema,
+            editor.blockCache
+          ),
+    nextBlock:
+      nextNode === null
+        ? undefined
+        : nodeToBlock(
+            nextNode,
+            editor.schema.blockSchema,
+            editor.schema.inlineContentSchema,
+            editor.schema.styleSchema,
+            editor.blockCache
+          ),
+    parentBlock:
+      parentNode === undefined
+        ? undefined
+        : nodeToBlock(
+            parentNode,
+            editor.schema.blockSchema,
+            editor.schema.inlineContentSchema,
+            editor.schema.styleSchema,
+            editor.blockCache
+          ),
+  };
+}
+
+export function setTextCursorPosition<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>,
+  targetBlock: BlockIdentifier,
+  placement: "start" | "end" = "start"
+) {
+  const id = typeof targetBlock === "string" ? targetBlock : targetBlock.id;
+
+  const posInfo = getNodeById(id, editor._tiptapEditor.state.doc);
+  const { blockContent } = getBlockInfo(posInfo);
+
+  const contentType: "none" | "inline" | "table" =
+    editor.schema.blockSchema[blockContent.node.type.name]!.content;
+
+  if (contentType === "none") {
+    editor._tiptapEditor.commands.setNodeSelection(blockContent.beforePos);
+    return;
+  }
+
+  if (contentType === "inline") {
+    if (placement === "start") {
+      editor._tiptapEditor.commands.setTextSelection(
+        blockContent.beforePos + 1
+      );
+    } else {
+      editor._tiptapEditor.commands.setTextSelection(blockContent.afterPos - 1);
+    }
+  } else if (contentType === "table") {
+    if (placement === "start") {
+      // Need to offset the position as we have to get through the `tableRow`
+      // and `tableCell` nodes to get to the `tableParagraph` node we want to
+      // set the selection in.
+      editor._tiptapEditor.commands.setTextSelection(
+        blockContent.beforePos + 4
+      );
+    } else {
+      editor._tiptapEditor.commands.setTextSelection(blockContent.afterPos - 4);
+    }
+  } else {
+    throw new UnreachableCaseError(contentType);
+  }
+}

package/src/api/blockManipulation/setupTestEnv.ts

@@ -0,0 +1,179 @@
+import { afterAll, beforeAll, beforeEach } from "vitest";
+
+import { PartialBlock } from "../../blocks/defaultBlocks.js";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+
+export function setupTestEnv() {
+  let editor: BlockNoteEditor;
+  const div = document.createElement("div");
+
+  beforeAll(() => {
+    editor = BlockNoteEditor.create();
+    editor.mount(div);
+  });
+
+  afterAll(() => {
+    editor.mount(undefined);
+    editor._tiptapEditor.destroy();
+    editor = undefined as any;
+  });
+
+  beforeEach(() => {
+    editor.replaceBlocks(editor.document, testDocument);
+  });
+
+  return () => editor;
+}
+
+const testDocument: PartialBlock[] = [
+  {
+    id: "paragraph-0",
+    type: "paragraph",
+    content: "Paragraph 0",
+  },
+  {
+    id: "paragraph-1",
+    type: "paragraph",
+    content: "Paragraph 1",
+  },
+  {
+    id: "paragraph-with-children",
+    type: "paragraph",
+    content: "Paragraph with children",
+    children: [
+      {
+        id: "nested-paragraph-0",
+        type: "paragraph",
+        content: "Nested Paragraph 0",
+        children: [
+          {
+            id: "double-nested-paragraph-0",
+            type: "paragraph",
+            content: "Double Nested Paragraph 0",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: "paragraph-2",
+    type: "paragraph",
+    content: "Paragraph 2",
+  },
+  {
+    id: "paragraph-with-props",
+    type: "paragraph",
+    props: {
+      textAlignment: "center",
+      textColor: "red",
+    },
+    content: "Paragraph with props",
+  },
+  {
+    id: "paragraph-3",
+    type: "paragraph",
+    content: "Paragraph 3",
+  },
+  {
+    id: "paragraph-with-styled-content",
+    type: "paragraph",
+    content: [
+      { type: "text", text: "Paragraph", styles: { bold: true } },
+      { type: "text", text: " with styled ", styles: {} },
+      { type: "text", text: "content", styles: { italic: true } },
+    ],
+  },
+  {
+    id: "paragraph-4",
+    type: "paragraph",
+    content: "Paragraph 4",
+  },
+  {
+    id: "heading-0",
+    type: "heading",
+    content: "Heading 1",
+  },
+  {
+    id: "paragraph-5",
+    type: "paragraph",
+    content: "Paragraph 5",
+  },
+  {
+    id: "image-0",
+    type: "image",
+    props: {
+      url: "https://via.placeholder.com/150",
+    },
+  },
+  {
+    id: "paragraph-6",
+    type: "paragraph",
+    content: "Paragraph 6",
+  },
+  {
+    id: "table-0",
+    type: "table",
+    content: {
+      type: "tableContent",
+      rows: [
+        {
+          cells: ["Cell 1", "Cell 2", "Cell 3"],
+        },
+        {
+          cells: ["Cell 4", "Cell 5", "Cell 6"],
+        },
+        {
+          cells: ["Cell 7", "Cell 8", "Cell 9"],
+        },
+      ],
+    },
+  },
+  {
+    id: "paragraph-7",
+    type: "paragraph",
+    content: "Paragraph 7",
+  },
+  {
+    id: "empty-paragraph",
+    type: "paragraph",
+    content: "",
+  },
+  {
+    id: "paragraph-8",
+    type: "paragraph",
+    content: "Paragraph 8",
+  },
+  {
+    id: "heading-with-everything",
+    type: "heading",
+    props: {
+      backgroundColor: "red",
+      level: 2,
+      textAlignment: "center",
+      textColor: "red",
+    },
+    content: [
+      { type: "text", text: "Heading", styles: { bold: true } },
+      { type: "text", text: " with styled ", styles: {} },
+      { type: "text", text: "content", styles: { italic: true } },
+    ],
+    children: [
+      {
+        id: "nested-paragraph-1",
+        type: "paragraph",
+        content: "Nested Paragraph 1",
+        children: [
+          {
+            id: "double-nested-paragraph-1",
+            type: "paragraph",
+            content: "Double Nested Paragraph 1",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: "trailing-paragraph",
+    type: "paragraph",
+  },
+];

package/src/api/clipboard/__snapshots__/tableAllCells.html

@@ -1 +1 @@
-<div class="bn-block-content" data-content-type="table"><table class="bn-inline-content"><tbody><tr><td colspan="1" rowspan="1"><p>Table Cell</p></td><td colspan="1" rowspan="1"><p>Table Cell</p></td></tr><tr><td colspan="1" rowspan="1"><p>Table Cell</p></td><td colspan="1" rowspan="1"><p>Table Cell</p></td></tr></tbody></table></div>
+<tr><td colspan="1" rowspan="1"><p>Table Cell</p></td><td colspan="1" rowspan="1"><p>Table Cell</p></td></tr><tr><td colspan="1" rowspan="1"><p>Table Cell</p></td><td colspan="1" rowspan="1"><p>Table Cell</p></td></tr>

package/src/api/clipboard/clipboard.test.ts

@@ -3,11 +3,11 @@ import { NodeSelection, Selection, TextSelection } from "prosemirror-state";
 import { CellSelection } from "prosemirror-tables";
 import { afterAll, beforeAll, beforeEach, describe, expect, it } from "vitest";
 
-import { PartialBlock } from "../../blocks/defaultBlocks";
-import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { doPaste } from "../testUtil/paste";
-import { initializeESMDependencies } from "../../util/esmDependencies";
-import { selectedFragmentToHTML } from "./toClipboard/copyExtension";
+import { PartialBlock } from "../../blocks/defaultBlocks.js";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { initializeESMDependencies } from "../../util/esmDependencies.js";
+import { doPaste } from "../testUtil/paste.js";
+import { selectedFragmentToHTML } from "./toClipboard/copyExtension.js";
 
 type SelectionTestCase = {
   testName: string;
@@ -269,7 +269,6 @@ describe("Test ProseMirror selection clipboard HTML", () => {
       createSelection: (doc) => CellSelection.create(doc, 214, 228),
     },
     // Selection spans all cells of the table.
-    // TODO: External HTML is wrapped in unnecessary `blockContent` element.
     {
       testName: "tableAllCells",
       createSelection: (doc) => CellSelection.create(doc, 214, 258),