@blocknote/core 0.21.0 → 0.23.0

package/src/api/clipboard/__snapshots__/external/pasteTableInExistingTable.html

@@ -0,0 +1,124 @@
+[
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Paragraph",
+        "type": "text",
+      },
+    ],
+    "id": "0",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  {
+    "children": [],
+    "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
+      "rows": [
+        {
+          "cells": [
+            [
+              {
+                "styles": {},
+                "text": "Table Cell",
+                "type": "text",
+              },
+            ],
+            [
+              {
+                "styles": {},
+                "text": "Table Cell",
+                "type": "text",
+              },
+            ],
+            [],
+          ],
+        },
+        {
+          "cells": [
+            [
+              {
+                "styles": {},
+                "text": "Table Cell",
+                "type": "text",
+              },
+            ],
+            [
+              {
+                "styles": {},
+                "text": "Cell 1",
+                "type": "text",
+              },
+            ],
+            [
+              {
+                "styles": {},
+                "text": "Cell 2",
+                "type": "text",
+              },
+            ],
+          ],
+        },
+        {
+          "cells": [
+            [],
+            [
+              {
+                "styles": {},
+                "text": "Cell 3",
+                "type": "text",
+              },
+            ],
+            [
+              {
+                "styles": {},
+                "text": "Cell 4",
+                "type": "text",
+              },
+            ],
+          ],
+        },
+      ],
+      "type": "tableContent",
+    },
+    "id": "1",
+    "props": {
+      "textColor": "default",
+    },
+    "type": "table",
+  },
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Custom Paragraph",
+        "type": "text",
+      },
+    ],
+    "id": "2",
+    "props": {},
+    "type": "customParagraph",
+  },
+  {
+    "children": [],
+    "content": [],
+    "id": "3",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+]

package/src/api/clipboard/__snapshots__/internal/basicBlocks.html

@@ -0,0 +1 @@
+<p>Paragraph</p><h1>Heading</h1><ol><li><p>Numbered List Item</p></li></ol><ul><li><p>Bullet List Item</p></li><li><input type="checkbox"><p class="bn-inline-content">Check List Item</p></li></ul><pre><code class="bn-inline-content language-javascript">console.log("Hello World");</code></pre><table><tr><td colspan="1" rowspan="1"><p>Table Cell</p></td><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><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><td colspan="1" rowspan="1"><p>Table Cell</p></td></tr></table><p>Add image</p><p data-text-color="red"></p>

package/src/api/clipboard/__snapshots__/internal/basicBlocksWithProps.html

@@ -0,0 +1 @@
+<p data-text-color="red">Paragraph</p><h2 data-level="2">Heading</h2><ol start="2"><li><p data-start="2">Numbered List Item</p></li></ol><ul><li><p data-background-color="red">Bullet List Item</p></li><li><input type="checkbox" checked="" data-checked="true"><p class="bn-inline-content">Check List Item</p></li></ul><pre><code class="bn-inline-content language-typescript">console.log("Hello World");</code></pre><table><tr><td colspan="1" rowspan="1"><p>Table Cell</p></td><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><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><td colspan="1" rowspan="1"><p>Table Cell</p></td></tr></table><figure data-name="1280px-Placeholder_view_vector.svg.png" data-url="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/1280px-Placeholder_view_vector.svg.png" data-caption="Placeholder" data-preview-width="256"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/1280px-Placeholder_view_vector.svg.png" alt="1280px-Placeholder_view_vector.svg.png" width="256"><figcaption>Placeholder</figcaption></figure><p></p>

package/src/api/clipboard/__snapshots__/internal/paragraphInCustomBlock.html

@@ -0,0 +1 @@
+Paragraph

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

@@ -0,0 +1,161 @@
+import { Node } from "prosemirror-model";
+import { Selection, TextSelection } from "prosemirror-state";
+import { afterAll, beforeAll, beforeEach, describe, expect, it } from "vitest";
+
+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 { schema } from "./testUtil.js";
+
+type SelectionTestCase = {
+  testName: string;
+  createSelection: (doc: Node) => Selection;
+} & (
+  | {
+      html: string;
+    }
+  | {
+      plainText: string;
+    }
+);
+
+// These tests are meant to test the pasting of external HTML in the editor.
+// Each test case has an HTML string to be pasted, and a selection in the editor
+// to paste at.
+describe("Test external clipboard HTML", () => {
+  const initialContent: PartialBlock<typeof schema.blockSchema>[] = [
+    {
+      type: "paragraph",
+      content: "Paragraph",
+    },
+    {
+      type: "table",
+      content: {
+        type: "tableContent",
+        rows: [
+          {
+            cells: ["Table Cell", "Table Cell"],
+          },
+          {
+            cells: ["Table Cell", "Table Cell"],
+          },
+        ],
+      },
+    },
+    {
+      type: "customParagraph",
+      content: "Custom Paragraph",
+    },
+    {
+      type: "paragraph",
+    },
+  ];
+
+  let editor: BlockNoteEditor<typeof schema.blockSchema>;
+  const div = document.createElement("div");
+
+  beforeEach(() => {
+    editor.replaceBlocks(editor.document, initialContent);
+  });
+
+  beforeAll(async () => {
+    (window as any).__TEST_OPTIONS = (window as any).__TEST_OPTIONS || {};
+
+    editor = BlockNoteEditor.create({ schema });
+    editor.mount(div);
+
+    await initializeESMDependencies();
+  });
+
+  afterAll(() => {
+    editor.mount(undefined);
+    editor._tiptapEditor.destroy();
+    editor = undefined as any;
+
+    delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
+  });
+
+  // Sets the editor selection to the given start and end positions, then
+  // pastes the HTML and compares it the document after to a snapshot.
+  async function testPasteExternalHTML(testCase: SelectionTestCase) {
+    if (!editor.prosemirrorView) {
+      throw new Error("Editor view not initialized.");
+    }
+
+    editor.dispatch(
+      editor._tiptapEditor.state.tr.setSelection(
+        testCase.createSelection(editor.prosemirrorView.state.doc)
+      )
+    );
+
+    doPaste(
+      editor.prosemirrorView,
+      "plainText" in testCase ? testCase.plainText : "",
+      "html" in testCase ? testCase.html : "",
+      "plainText" in testCase,
+      new ClipboardEvent("paste")
+    );
+
+    expect(editor.document).toMatchFileSnapshot(
+      `./__snapshots__/external/${testCase.testName}.html`
+    );
+  }
+
+  const testCases: SelectionTestCase[] = [
+    {
+      testName: "pasteEndOfParagraph",
+      createSelection: (doc) => TextSelection.create(doc, 12),
+      html: `<p>Paragraph</p>`,
+    },
+    {
+      testName: "pasteEndOfParagraphText",
+      createSelection: (doc) => TextSelection.create(doc, 12),
+      plainText: `Paragraph`,
+    },
+    {
+      testName: "pasteImage",
+      createSelection: (doc) => TextSelection.create(doc, 12),
+      html: `<img src="exampleURL">`,
+    },
+    {
+      testName: "pasteTable",
+      createSelection: (doc) => TextSelection.create(doc, 12),
+      html: `<table>
+  <tr>
+    <td>Cell 1</td>
+    <td>Cell 2</td>
+  </tr>
+  <tr>
+    <td>Cell 3</td>
+    <td>Cell 4</td>
+  </tr>
+</table>`,
+    },
+    {
+      testName: "pasteTableInExistingTable",
+      createSelection: (doc) => TextSelection.create(doc, 73),
+      html: `<table>
+  <tr>
+    <td>Cell 1</td>
+    <td>Cell 2</td>
+  </tr>
+  <tr>
+    <td>Cell 3</td>
+    <td>Cell 4</td>
+  </tr>
+</table>`,
+    },
+    {
+      testName: "pasteParagraphInCustomBlock",
+      createSelection: (doc) => TextSelection.create(doc, 80, 96),
+      html: `<p>Paragraph</p>`,
+    },
+  ];
+
+  for (const testCase of testCases) {
+    it(`${testCase.testName}`, async () => {
+      await testPasteExternalHTML(testCase);
+    });
+  }
+});

package/src/api/clipboard/{clipboard.test.ts → clipboardInternal.test.ts}

@@ -7,11 +7,13 @@ 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 { schema } from "./testUtil.js";
 import { selectedFragmentToHTML } from "./toClipboard/copyExtension.js";
 
 type SelectionTestCase = {
   testName: string;
-  createSelection: (doc: Node) => Selection;
+  createCopySelection: (doc: Node) => Selection;
+  createPasteSelection?: (doc: Node) => Selection;
 };
 
 // These tests are meant to test the copying of user selections in the editor.
@@ -19,7 +21,7 @@ type SelectionTestCase = {
 // as they are represented in the BlockNote API, whereas here we want to test
 // ProseMirror/TipTap selections directly.
 describe("Test ProseMirror selection clipboard HTML", () => {
-  const initialContent: PartialBlock[] = [
+  const initialContent: PartialBlock<typeof schema.blockSchema>[] = [
     {
       type: "heading",
       props: {
@@ -138,9 +140,133 @@ describe("Test ProseMirror selection clipboard HTML", () => {
       //   },
       // ],
     },
+    {
+      type: "paragraph",
+      content: "Paragraph",
+    },
+    {
+      type: "customParagraph",
+      content: "Paragraph",
+    },
+    {
+      type: "paragraph",
+      content: "Paragraph",
+    },
+    {
+      type: "heading",
+      content: "Heading",
+    },
+    {
+      type: "numberedListItem",
+      content: "Numbered List Item",
+    },
+    {
+      type: "bulletListItem",
+      content: "Bullet List Item",
+    },
+    {
+      type: "checkListItem",
+      content: "Check List Item",
+    },
+    {
+      type: "codeBlock",
+      content: 'console.log("Hello World");',
+    },
+    {
+      type: "table",
+      content: {
+        type: "tableContent",
+        rows: [
+          {
+            cells: [["Table Cell"], ["Table Cell"], ["Table Cell"]],
+          },
+          {
+            cells: [["Table Cell"], ["Table Cell"], ["Table Cell"]],
+          },
+          {
+            cells: [["Table Cell"], ["Table Cell"], ["Table Cell"]],
+          },
+        ],
+      },
+    },
+    {
+      type: "image",
+    },
+    {
+      type: "paragraph",
+      props: {
+        textColor: "red",
+      },
+      content: "Paragraph",
+    },
+    {
+      type: "heading",
+      props: {
+        level: 2,
+      },
+      content: "Heading",
+    },
+    {
+      type: "numberedListItem",
+      props: {
+        start: 2,
+      },
+      content: "Numbered List Item",
+    },
+    {
+      type: "bulletListItem",
+      props: {
+        backgroundColor: "red",
+      },
+      content: "Bullet List Item",
+    },
+    {
+      type: "checkListItem",
+      props: {
+        checked: true,
+      },
+      content: "Check List Item",
+    },
+    {
+      type: "codeBlock",
+      props: {
+        language: "typescript",
+      },
+      content: 'console.log("Hello World");',
+    },
+    {
+      type: "table",
+      content: {
+        type: "tableContent",
+        rows: [
+          {
+            cells: [["Table Cell"], ["Table Cell"], ["Table Cell"]],
+          },
+          {
+            cells: [["Table Cell"], ["Table Cell"], ["Table Cell"]],
+          },
+          {
+            cells: [["Table Cell"], ["Table Cell"], ["Table Cell"]],
+          },
+        ],
+      },
+    },
+    {
+      type: "image",
+      props: {
+        name: "1280px-Placeholder_view_vector.svg.png",
+        url: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/1280px-Placeholder_view_vector.svg.png",
+        caption: "Placeholder",
+        showPreview: true,
+        previewWidth: 256,
+      },
+    },
+    {
+      type: "paragraph",
+    },
   ];
 
-  let editor: BlockNoteEditor;
+  let editor: BlockNoteEditor<typeof schema.blockSchema>;
   const div = document.createElement("div");
 
   beforeEach(() => {
@@ -150,7 +276,7 @@ describe("Test ProseMirror selection clipboard HTML", () => {
   beforeAll(async () => {
     (window as any).__TEST_OPTIONS = (window as any).__TEST_OPTIONS || {};
 
-    editor = BlockNoteEditor.create();
+    editor = BlockNoteEditor.create({ schema });
     editor.mount(div);
 
     await initializeESMDependencies();
@@ -173,7 +299,7 @@ describe("Test ProseMirror selection clipboard HTML", () => {
 
     editor.dispatch(
       editor._tiptapEditor.state.tr.setSelection(
-        testCase.createSelection(editor.prosemirrorView.state.doc)
+        testCase.createCopySelection(editor.prosemirrorView.state.doc)
       )
     );
 
@@ -183,9 +309,17 @@ describe("Test ProseMirror selection clipboard HTML", () => {
     );
 
     expect(externalHTML).toMatchFileSnapshot(
-      `./__snapshots__/${testCase.testName}.html`
+      `./__snapshots__/internal/${testCase.testName}.html`
     );
 
+    if (testCase.createPasteSelection) {
+      editor.dispatch(
+        editor._tiptapEditor.state.tr.setSelection(
+          testCase.createPasteSelection(editor.prosemirrorView.state.doc)
+        )
+      );
+    }
+
     const originalDocument = editor.document;
     doPaste(
       editor.prosemirrorView,
@@ -201,81 +335,95 @@ describe("Test ProseMirror selection clipboard HTML", () => {
 
   const testCases: SelectionTestCase[] = [
     // TODO: Consider adding test cases for nested blocks & double nested blocks.
-    // Selection spans all of first heading's children.
+    // Copy/paste all of first heading's children.
     {
       testName: "multipleChildren",
-      createSelection: (doc) => TextSelection.create(doc, 16, 78),
+      createCopySelection: (doc) => TextSelection.create(doc, 16, 78),
     },
-    // Selection spans from start of first heading to end of its first child.
+    // Copy/paste from start of first heading to end of its first child.
     {
       testName: "childToParent",
-      createSelection: (doc) => TextSelection.create(doc, 3, 34),
+      createCopySelection: (doc) => TextSelection.create(doc, 3, 34),
     },
-    // Selection spans from middle of first heading to the middle of its first
-    // child.
+    // Copy/paste from middle of first heading to the middle of its first child.
     {
       testName: "partialChildToParent",
-      createSelection: (doc) => TextSelection.create(doc, 6, 23),
+      createCopySelection: (doc) => TextSelection.create(doc, 6, 23),
     },
-    // Selection spans from start of first heading's first child to end of
-    // second heading's content (does not include second heading's children).
+    // Copy/paste from start of first heading's first child to end of second
+    // heading's content (does not include second heading's children).
     {
       testName: "childrenToNextParent",
-      createSelection: (doc) => TextSelection.create(doc, 16, 93),
+      createCopySelection: (doc) => TextSelection.create(doc, 16, 93),
     },
-    // Selection spans from start of first heading's first child to end of
-    // second heading's last child.
+    // Copy/paste from start of first heading's first child to end of second
+    // heading's last child.
     {
       testName: "childrenToNextParentsChildren",
-      createSelection: (doc) => TextSelection.create(doc, 16, 159),
+      createCopySelection: (doc) => TextSelection.create(doc, 16, 159),
     },
-    // Selection spans "Regular" text inside third heading.
+    // Copy/paste "Regular" text inside third heading.
     {
       testName: "unstyledText",
-      createSelection: (doc) => TextSelection.create(doc, 175, 182),
+      createCopySelection: (doc) => TextSelection.create(doc, 175, 182),
     },
-    // Selection spans "Italic" text inside third heading.
+    // Copy/paste "Italic" text inside third heading.
     {
       testName: "styledText",
-      createSelection: (doc) => TextSelection.create(doc, 169, 175),
+      createCopySelection: (doc) => TextSelection.create(doc, 169, 175),
     },
-    // Selection spans third heading's content (does not include third heading's
+    // Copy/paste third heading's content (does not include third heading's
     // children).
     {
       testName: "multipleStyledText",
-      createSelection: (doc) => TextSelection.create(doc, 165, 182),
+      createCopySelection: (doc) => TextSelection.create(doc, 165, 182),
     },
-    // Selection spans the image block content.
+    // Copy/paste the image block content.
     {
       testName: "image",
-      createSelection: (doc) => NodeSelection.create(doc, 185),
+      createCopySelection: (doc) => NodeSelection.create(doc, 185),
     },
-    // Selection spans from start of third heading to end of it's last
-    // descendant.
+    // Copy/paste from start of third heading to end of it's last descendant.
     {
       testName: "nestedImage",
-      createSelection: (doc) => TextSelection.create(doc, 165, 205),
+      createCopySelection: (doc) => TextSelection.create(doc, 165, 205),
     },
-    // Selection spans text in first cell of the table.
+    // Copy/paste text in first cell of the table.
     {
       testName: "tableCellText",
-      createSelection: (doc) => TextSelection.create(doc, 216, 226),
+      createCopySelection: (doc) => TextSelection.create(doc, 216, 226),
     },
-    // Selection spans first cell of the table.
+    // Copy/paste first cell of the table.
     // TODO: External HTML is wrapped in unnecessary `tr` element.
     {
       testName: "tableCell",
-      createSelection: (doc) => CellSelection.create(doc, 214),
+      createCopySelection: (doc) => CellSelection.create(doc, 214),
     },
-    // Selection spans first row of the table.
+    // Copy/paste first row of the table.
     {
       testName: "tableRow",
-      createSelection: (doc) => CellSelection.create(doc, 214, 228),
+      createCopySelection: (doc) => CellSelection.create(doc, 214, 228),
     },
-    // Selection spans all cells of the table.
+    // Copy/paste all cells of the table.
     {
       testName: "tableAllCells",
-      createSelection: (doc) => CellSelection.create(doc, 214, 258),
+      createCopySelection: (doc) => CellSelection.create(doc, 214, 258),
+    },
+    // Copy regular paragraph content and paste over custom block content.
+    {
+      testName: "paragraphInCustomBlock",
+      createCopySelection: (doc) => TextSelection.create(doc, 277, 286),
+      createPasteSelection: (doc) => TextSelection.create(doc, 290, 299),
+    },
+    // Copy/paste basic blocks.
+    {
+      testName: "basicBlocks",
+      createCopySelection: (doc) => TextSelection.create(doc, 303, 558),
+    },
+    // Copy/paste basic blocks with props.
+    {
+      testName: "basicBlocksWithProps",
+      createCopySelection: (doc) => TextSelection.create(doc, 558, 813),
     },
   ];
 

package/src/api/clipboard/testUtil.ts

@@ -0,0 +1,27 @@
+import { createBlockSpec } from "../../schema/index.js";
+import { BlockNoteSchema } from "../../editor/BlockNoteSchema.js";
+import { defaultBlockSpecs } from "../../blocks/defaultBlocks.js";
+
+const CustomParagraph = createBlockSpec(
+  {
+    type: "customParagraph",
+    content: "inline",
+    propSchema: {},
+  },
+  {
+    render: () => {
+      const customParagraph = document.createElement("p");
+
+      return {
+        dom: customParagraph,
+        contentDOM: customParagraph,
+      };
+    },
+  }
+);
+export const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    ...defaultBlockSpecs,
+    customParagraph: CustomParagraph as any,
+  },
+});

package/src/api/clipboard/toClipboard/copyExtension.ts

@@ -80,6 +80,7 @@ function fragmentToExternalHTML<
       editor.schema.styleSchema
     );
 
+    // Wrap in table to ensure correct parsing by spreadsheet applications
     externalHTML = `<table>${externalHTMLExporter.exportInlineContent(
       ic as any,
       {}

package/src/api/exporters/html/__snapshots__/pageBreak/basic/external.html

@@ -0,0 +1 @@
+<div data-page-break=""></div>

package/src/api/exporters/html/__snapshots__/pageBreak/basic/internal.html

@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="pageBreak"><div class="bn-page-break" data-page-break=""></div></div></div></div></div>

package/src/api/exporters/html/util/serializeBlocksExternalHTML.ts

@@ -104,7 +104,9 @@ function serializeBlock<
     for (const [name, spec] of Object.entries(
       editor.schema.blockSchema[block.type as any].propSchema
     )) {
-      (props as any)[name] = spec.default;
+      if (spec.default !== undefined) {
+        (props as any)[name] = spec.default;
+      }
     }
   }
 
@@ -172,6 +174,10 @@ function serializeBlock<
   if (listType) {
     if (fragment.lastChild?.nodeName !== listType) {
       const list = doc.createElement(listType);
+
+      if (listType === "OL" && props?.start && props?.start !== 1) {
+        list.setAttribute("start", props.start + "");
+      }
       fragment.append(list);
     }
     const li = doc.createElement("li");