@blocknote/core 0.15.11 → 0.17.0

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

@@ -0,0 +1 @@
+<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/__snapshots__/tableCell.html

@@ -0,0 +1 @@
+<tr><td colspan="1" rowspan="1"><p>Table Cell</p></td></tr>

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

@@ -0,0 +1 @@
+Table Cell

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

@@ -0,0 +1 @@
+<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/__snapshots__/unstyledText.html

@@ -0,0 +1 @@
+Regular

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

@@ -0,0 +1,283 @@
+import { Node } from "prosemirror-model";
+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.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;
+  createSelection: (doc: Node) => Selection;
+};
+
+// These tests are meant to test the copying of user selections in the editor.
+// The test cases used for the other HTML conversion tests are not suitable here
+// 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[] = [
+    {
+      type: "heading",
+      props: {
+        level: 2,
+        textColor: "red",
+      },
+      content: "Heading 1",
+      children: [
+        {
+          type: "paragraph",
+          content: "Nested Paragraph 1",
+        },
+        {
+          type: "paragraph",
+          content: "Nested Paragraph 2",
+        },
+        {
+          type: "paragraph",
+          content: "Nested Paragraph 3",
+        },
+      ],
+    },
+    {
+      type: "heading",
+      props: {
+        level: 2,
+        textColor: "red",
+      },
+      content: "Heading 2",
+      children: [
+        {
+          type: "paragraph",
+          content: "Nested Paragraph 1",
+        },
+        {
+          type: "paragraph",
+          content: "Nested Paragraph 2",
+        },
+        {
+          type: "paragraph",
+          content: "Nested Paragraph 3",
+        },
+      ],
+    },
+    {
+      type: "heading",
+      props: {
+        level: 2,
+        textColor: "red",
+      },
+      content: [
+        {
+          type: "text",
+          text: "Bold",
+          styles: {
+            bold: true,
+          },
+        },
+        {
+          type: "text",
+          text: "Italic",
+          styles: {
+            italic: true,
+          },
+        },
+        {
+          type: "text",
+          text: "Regular",
+          styles: {},
+        },
+      ],
+      children: [
+        {
+          type: "image",
+          props: {
+            url: "https://ralfvanveen.com/wp-content/uploads/2021/06/Placeholder-_-Glossary.svg",
+          },
+          children: [
+            {
+              type: "paragraph",
+              content: "Nested Paragraph",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: "table",
+      content: {
+        type: "tableContent",
+        rows: [
+          {
+            cells: ["Table Cell", "Table Cell"],
+          },
+          {
+            cells: ["Table Cell", "Table Cell"],
+          },
+        ],
+      },
+      // Not needed as selections starting in table cells will get snapped to
+      // the table boundaries.
+      // children: [
+      //   {
+      //     type: "table",
+      //     content: {
+      //       type: "tableContent",
+      //       rows: [
+      //         {
+      //           cells: ["Table Cell", "Table Cell"],
+      //         },
+      //         {
+      //           cells: ["Table Cell", "Table Cell"],
+      //         },
+      //       ],
+      //     },
+      //   },
+      // ],
+    },
+  ];
+
+  let editor: BlockNoteEditor;
+  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();
+    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
+  // exports the selected content to HTML and compares it to a snapshot.
+  async function testSelection(testCase: SelectionTestCase) {
+    editor.dispatch(
+      editor._tiptapEditor.state.tr.setSelection(
+        testCase.createSelection(editor._tiptapEditor.view.state.doc)
+      )
+    );
+
+    const { clipboardHTML, externalHTML } = await selectedFragmentToHTML(
+      editor._tiptapEditor.view,
+      editor
+    );
+
+    expect(externalHTML).toMatchFileSnapshot(
+      `./__snapshots__/${testCase.testName}.html`
+    );
+
+    const originalDocument = editor.document;
+    doPaste(
+      editor._tiptapEditor.view,
+      "text",
+      clipboardHTML,
+      false,
+      new ClipboardEvent("paste")
+    );
+    const newDocument = editor.document;
+
+    expect(newDocument).toStrictEqual(originalDocument);
+  }
+
+  const testCases: SelectionTestCase[] = [
+    // TODO: Consider adding test cases for nested blocks & double nested blocks.
+    // Selection spans all of first heading's children.
+    {
+      testName: "multipleChildren",
+      createSelection: (doc) => TextSelection.create(doc, 16, 78),
+    },
+    // Selection spans from start of first heading to end of its first child.
+    {
+      testName: "childToParent",
+      createSelection: (doc) => TextSelection.create(doc, 3, 34),
+    },
+    // Selection spans from middle of first heading to the middle of its first
+    // child.
+    {
+      testName: "partialChildToParent",
+      createSelection: (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).
+    {
+      testName: "childrenToNextParent",
+      createSelection: (doc) => TextSelection.create(doc, 16, 93),
+    },
+    // Selection spans 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),
+    },
+    // Selection spans "Regular" text inside third heading.
+    {
+      testName: "unstyledText",
+      createSelection: (doc) => TextSelection.create(doc, 175, 182),
+    },
+    // Selection spans "Italic" text inside third heading.
+    {
+      testName: "styledText",
+      createSelection: (doc) => TextSelection.create(doc, 169, 175),
+    },
+    // Selection spans third heading's content (does not include third heading's
+    // children).
+    {
+      testName: "multipleStyledText",
+      createSelection: (doc) => TextSelection.create(doc, 165, 182),
+    },
+    // Selection spans the image block content.
+    {
+      testName: "image",
+      createSelection: (doc) => NodeSelection.create(doc, 185),
+    },
+    // Selection spans from start of third heading to end of it's last
+    // descendant.
+    {
+      testName: "nestedImage",
+      createSelection: (doc) => TextSelection.create(doc, 165, 205),
+    },
+    // Selection spans text in first cell of the table.
+    {
+      testName: "tableCellText",
+      createSelection: (doc) => TextSelection.create(doc, 216, 226),
+    },
+    // Selection spans first cell of the table.
+    // TODO: External HTML is wrapped in unnecessary `tr` element.
+    {
+      testName: "tableCell",
+      createSelection: (doc) => CellSelection.create(doc, 214),
+    },
+    // Selection spans first row of the table.
+    {
+      testName: "tableRow",
+      createSelection: (doc) => CellSelection.create(doc, 214, 228),
+    },
+    // Selection spans all cells of the table.
+    {
+      testName: "tableAllCells",
+      createSelection: (doc) => CellSelection.create(doc, 214, 258),
+    },
+  ];
+
+  for (const testCase of testCases) {
+    it(`${testCase.testName}`, async () => {
+      await testSelection(testCase);
+    });
+  }
+});

package/src/api/{parsers → clipboard/fromClipboard}/fileDropExtension.ts

@@ -1,10 +1,14 @@
 import { Extension } from "@tiptap/core";
 import { Plugin } from "prosemirror-state";
 
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
-import { handleFileInsertion } from "./handleFileInsertion";
-import { acceptedMIMETypes } from "./acceptedMIMETypes";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../schema/index.js";
+import { acceptedMIMETypes } from "./acceptedMIMETypes.js";
+import { handleFileInsertion } from "./handleFileInsertion.js";
 
 export const createDropFileExtension = <
   BSchema extends BlockSchema,

package/src/api/{parsers → clipboard/fromClipboard}/handleFileInsertion.ts

@@ -1,13 +1,16 @@
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { PartialBlock } from "../../blocks/defaultBlocks";
+import { PartialBlock } from "../../../blocks/defaultBlocks.js";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
 import {
   BlockSchema,
   FileBlockConfig,
   InlineContentSchema,
   StyleSchema,
-} from "../../schema";
-import { getBlockInfoFromPos } from "../getBlockInfoFromPos";
-import { acceptedMIMETypes } from "./acceptedMIMETypes";
+} from "../../../schema/index.js";
+import {
+  getBlockInfo,
+  getNearestBlockContainerPos,
+} from "../../getBlockInfoFromPos.js";
+import { acceptedMIMETypes } from "./acceptedMIMETypes.js";
 
 function checkFileExtensionsMatch(
   fileExtension1: string,
@@ -132,14 +135,16 @@ export async function handleFileInsertion<
           return;
         }
 
-        const blockInfo = getBlockInfoFromPos(
+        const posInfo = getNearestBlockContainerPos(
           editor._tiptapEditor.state.doc,
           pos.pos
         );
 
+        const blockInfo = getBlockInfo(posInfo);
+
         insertedBlockId = editor.insertBlocks(
           [fileBlock],
-          blockInfo.id,
+          blockInfo.blockContainer.node.attrs.id,
           "after"
         )[0].id;
       } else {

package/src/api/{parsers → clipboard/fromClipboard}/pasteExtension.ts

@@ -1,11 +1,15 @@
 import { Extension } from "@tiptap/core";
 import { Plugin } from "prosemirror-state";
 
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
-import { handleFileInsertion } from "./handleFileInsertion";
-import { nestedListsToBlockNoteStructure } from "./html/util/nestedLists";
-import { acceptedMIMETypes } from "./acceptedMIMETypes";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../schema/index.js";
+import { nestedListsToBlockNoteStructure } from "../../parsers/html/util/nestedLists.js";
+import { acceptedMIMETypes } from "./acceptedMIMETypes.js";
+import { handleFileInsertion } from "./handleFileInsertion.js";
 
 export const createPasteFromClipboardExtension = <
   BSchema extends BlockSchema,
@@ -28,14 +32,14 @@ export const createPasteFromClipboardExtension = <
                   return;
                 }
 
-                let format: (typeof acceptedMIMETypes)[number] | null = null;
+                let format: (typeof acceptedMIMETypes)[number] | undefined;
                 for (const mimeType of acceptedMIMETypes) {
                   if (event.clipboardData!.types.includes(mimeType)) {
                     format = mimeType;
                     break;
                   }
                 }
-                if (format === null) {
+                if (!format) {
                   return true;
                 }
 
@@ -46,12 +50,19 @@ export const createPasteFromClipboardExtension = <
 
                 let data = event.clipboardData!.getData(format);
 
+                if (format === "blocknote/html") {
+                  editor._tiptapEditor.view.pasteHTML(data);
+                  return true;
+                }
+
                 if (format === "text/html") {
                   const htmlNode = nestedListsToBlockNoteStructure(data.trim());
                   data = htmlNode.innerHTML;
+                  editor._tiptapEditor.view.pasteHTML(data);
+                  return true;
                 }
 
-                editor._tiptapEditor.view.pasteHTML(data);
+                editor._tiptapEditor.view.pasteText(data);
 
                 return true;
               },

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

@@ -0,0 +1,243 @@
+import { Extension } from "@tiptap/core";
+import { Fragment, Node } from "prosemirror-model";
+import { NodeSelection, Plugin } from "prosemirror-state";
+import { CellSelection } from "prosemirror-tables";
+import * as pmView from "prosemirror-view";
+
+import { EditorView } from "prosemirror-view";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../schema/index.js";
+import { createExternalHTMLExporter } from "../../exporters/html/externalHTMLExporter.js";
+import { cleanHTMLToMarkdown } from "../../exporters/markdown/markdownExporter.js";
+import { fragmentToBlocks } from "../../nodeConversions/fragmentToBlocks.js";
+import {
+  contentNodeToInlineContent,
+  contentNodeToTableContent,
+} from "../../nodeConversions/nodeToBlock.js";
+
+function fragmentToExternalHTML<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  view: pmView.EditorView,
+  selectedFragment: Fragment,
+  editor: BlockNoteEditor<BSchema, I, S>
+) {
+  let isWithinBlockContent = false;
+  const isWithinTable = view.state.selection instanceof CellSelection;
+
+  if (!isWithinTable) {
+    // Checks whether block ancestry should be included when creating external
+    // HTML. If the selection is within a block content node, the block ancestry
+    // is excluded as we only care about the inline content.
+    const fragmentWithoutParents = view.state.doc.slice(
+      view.state.selection.from,
+      view.state.selection.to,
+      false
+    ).content;
+
+    const children = [];
+    for (let i = 0; i < fragmentWithoutParents.childCount; i++) {
+      children.push(fragmentWithoutParents.child(i));
+    }
+
+    isWithinBlockContent =
+      children.find(
+        (child) =>
+          child.type.name === "blockContainer" ||
+          child.type.name === "blockGroup" ||
+          child.type.spec.group === "blockContent"
+      ) === undefined;
+    if (isWithinBlockContent) {
+      selectedFragment = fragmentWithoutParents;
+    }
+  }
+
+  let externalHTML: string;
+
+  const externalHTMLExporter = createExternalHTMLExporter(
+    view.state.schema,
+    editor
+  );
+
+  if (isWithinTable) {
+    if (selectedFragment.firstChild?.type.name === "table") {
+      // contentNodeToTableContent expects the fragment of the content of a table, not the table node itself
+      // but cellselection.content() returns the table node itself if all cells and columns are selected
+      selectedFragment = selectedFragment.firstChild.content;
+    }
+
+    // first convert selection to blocknote-style table content, and then
+    // pass this to the exporter
+    const ic = contentNodeToTableContent(
+      selectedFragment as any,
+      editor.schema.inlineContentSchema,
+      editor.schema.styleSchema
+    );
+
+    externalHTML = externalHTMLExporter.exportInlineContent(ic as any, {});
+  } else if (isWithinBlockContent) {
+    // first convert selection to blocknote-style inline content, and then
+    // pass this to the exporter
+    const ic = contentNodeToInlineContent(
+      selectedFragment as any,
+      editor.schema.inlineContentSchema,
+      editor.schema.styleSchema
+    );
+    externalHTML = externalHTMLExporter.exportInlineContent(ic, {});
+  } else {
+    const blocks = fragmentToBlocks(selectedFragment, editor.schema);
+    externalHTML = externalHTMLExporter.exportBlocks(blocks, {});
+  }
+  return externalHTML;
+}
+
+export function selectedFragmentToHTML<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  view: EditorView,
+  editor: BlockNoteEditor<BSchema, I, S>
+): {
+  clipboardHTML: string;
+  externalHTML: string;
+  markdown: string;
+} {
+  // Checks if a `blockContent` node is being copied and expands
+  // the selection to the parent `blockContainer` node. This is
+  // for the use-case in which only a block without content is
+  // selected, e.g. an image block.
+  if (
+    "node" in view.state.selection &&
+    (view.state.selection.node as Node).type.spec.group === "blockContent"
+  ) {
+    editor.dispatch(
+      editor._tiptapEditor.state.tr.setSelection(
+        new NodeSelection(view.state.doc.resolve(view.state.selection.from - 1))
+      )
+    );
+  }
+
+  // Uses default ProseMirror clipboard serialization.
+  const clipboardHTML: string = (pmView as any).__serializeForClipboard(
+    view,
+    view.state.selection.content()
+  ).dom.innerHTML;
+
+  const selectedFragment = view.state.selection.content().content;
+
+  const externalHTML = fragmentToExternalHTML<BSchema, I, S>(
+    view,
+    selectedFragment,
+    editor
+  );
+
+  const markdown = cleanHTMLToMarkdown(externalHTML);
+
+  return { clipboardHTML, externalHTML, markdown };
+}
+
+const copyToClipboard = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>,
+  view: EditorView,
+  event: ClipboardEvent
+) => {
+  // Stops the default browser copy behaviour.
+  event.preventDefault();
+  event.clipboardData!.clearData();
+
+  const { clipboardHTML, externalHTML, markdown } = selectedFragmentToHTML(
+    view,
+    editor
+  );
+
+  // TODO: Writing to other MIME types not working in Safari for
+  //  some reason.
+  event.clipboardData!.setData("blocknote/html", clipboardHTML);
+  event.clipboardData!.setData("text/html", externalHTML);
+  event.clipboardData!.setData("text/plain", markdown);
+};
+
+export const createCopyToClipboardExtension = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>
+) =>
+  Extension.create<{ editor: BlockNoteEditor<BSchema, I, S> }, undefined>({
+    name: "copyToClipboard",
+    addProseMirrorPlugins() {
+      return [
+        new Plugin({
+          props: {
+            handleDOMEvents: {
+              copy(view, event) {
+                copyToClipboard(editor, view, event);
+                // Prevent default PM handler to be called
+                return true;
+              },
+              cut(view, event) {
+                copyToClipboard(editor, view, event);
+                view.dispatch(view.state.tr.deleteSelection());
+                // Prevent default PM handler to be called
+                return true;
+              },
+              // This is for the use-case in which only a block without content
+              // is selected, e.g. an image block, and dragged (not using the
+              // drag handle).
+              dragstart(view, event) {
+                // Checks if a `NodeSelection` is active.
+                if (!("node" in view.state.selection)) {
+                  return;
+                }
+
+                // Checks if a `blockContent` node is being dragged.
+                if (
+                  (view.state.selection.node as Node).type.spec.group !==
+                  "blockContent"
+                ) {
+                  return;
+                }
+
+                // Expands the selection to the parent `blockContainer` node.
+                editor.dispatch(
+                  editor._tiptapEditor.state.tr.setSelection(
+                    new NodeSelection(
+                      view.state.doc.resolve(view.state.selection.from - 1)
+                    )
+                  )
+                );
+
+                // Stops the default browser drag start behaviour.
+                event.preventDefault();
+                event.dataTransfer!.clearData();
+
+                const { clipboardHTML, externalHTML, markdown } =
+                  selectedFragmentToHTML(view, editor);
+
+                // TODO: Writing to other MIME types not working in Safari for
+                //  some reason.
+                event.dataTransfer!.setData("blocknote/html", clipboardHTML);
+                event.dataTransfer!.setData("text/html", externalHTML);
+                event.dataTransfer!.setData("text/plain", markdown);
+
+                // Prevent default PM handler to be called
+                return true;
+              },
+            },
+          },
+        }),
+      ];
+    },
+  });

package/src/api/exporters/html/__snapshots__/complex/misc/external.html

@@ -1 +1 @@
-<h2 data-text-color="yellow" data-background-color="blue" data-text-alignment="right" data-level="2"><strong><u>Heading </u></strong><em><s>2</s></em></h2><p data-background-color="red">Paragraph</p><ul><li><p class="bn-inline-content"></p></li></ul>
+<h2 data-text-color="yellow" data-background-color="blue" data-text-alignment="right" data-level="2"><strong><u>Heading </u></strong><em><s>2</s></em></h2><p data-background-color="red">Paragraph</p><ul><li><p></p></li></ul>

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

@@ -1 +1 @@
-<ul><li><p class="bn-inline-content">Bullet List Item 1</p></li><li><p class="bn-inline-content">Bullet List Item 2</p></li></ul><ol><li><p class="bn-inline-content">Numbered List Item 1</p></li><li><p class="bn-inline-content">Numbered List Item 2</p></li></ol><ul><li><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></li><li><input type="checkbox" checked><p class="bn-inline-content">Check List Item 2</p></li></ul>
+<ul><li><p>Bullet List Item 1</p></li><li><p>Bullet List Item 2</p></li></ul><ol><li><p>Numbered List Item 1</p></li><li><p>Numbered List Item 2</p></li></ol><ul><li><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></li><li><input type="checkbox" checked="" data-checked="true"><p class="bn-inline-content">Check List Item 2</p></li></ul>

package/src/api/exporters/html/__snapshots__/lists/nested/external.html

@@ -1 +1 @@
-<ul><li><p class="bn-inline-content">Bullet List Item 1</p></li><li><p class="bn-inline-content">Bullet List Item 2</p><ol><li><p class="bn-inline-content">Numbered List Item 1</p></li><li><p class="bn-inline-content">Numbered List Item 2</p><ul><li><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></li><li><input type="checkbox" checked><p class="bn-inline-content">Check List Item 2</p></li></ul></li></ol></li></ul>
+<ul><li><p>Bullet List Item 1</p></li><li><p>Bullet List Item 2</p><ol><li><p>Numbered List Item 1</p></li><li><p>Numbered List Item 2</p><ul><li><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></li><li><input type="checkbox" checked="" data-checked="true"><p class="bn-inline-content">Check List Item 2</p></li></ul></li></ol></li></ul>