@blocknote/core 0.15.11 → 0.16.0

package/src/api/parsers/markdown/__snapshots__/pasted/nested.json

@@ -0,0 +1,81 @@
+[
+  {
+    "id": "5",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "# Heading",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "6",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Paragraph",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "7",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "*   Bullet List Item",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "8",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "    1.  Numbered List Item",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "9",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [],
+    "children": []
+  }
+]

package/src/api/parsers/markdown/__snapshots__/pasted/non-nested.json

@@ -0,0 +1,81 @@
+[
+  {
+    "id": "5",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "# Heading",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "6",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Paragraph",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "7",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "*   Bullet List Item",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "8",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "1.  Numbered List Item",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "9",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [],
+    "children": []
+  }
+]

package/src/api/parsers/markdown/__snapshots__/pasted/styled.json

@@ -0,0 +1,61 @@
+[
+  {
+    "id": "2",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Bold",
+        "styles": {
+          "bold": true
+        }
+      },
+      {
+        "type": "text",
+        "text": " ",
+        "styles": {}
+      },
+      {
+        "type": "text",
+        "text": "Italic",
+        "styles": {
+          "italic": true
+        }
+      },
+      {
+        "type": "text",
+        "text": " ",
+        "styles": {}
+      },
+      {
+        "type": "text",
+        "text": "Strikethrough",
+        "styles": {
+          "strike": true
+        }
+      },
+      {
+        "type": "text",
+        "text": " ***Multiple***",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "3",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [],
+    "children": []
+  }
+]

package/src/api/parsers/markdown/parseMarkdown.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { BlockNoteEditor } from "../../..";
+import { doPaste } from "../../testUtil/paste";
 
 async function parseMarkdownAndCompareSnapshots(
   md: string,
@@ -14,6 +15,20 @@ async function parseMarkdownAndCompareSnapshots(
   expect(JSON.stringify(blocks, undefined, 2)).toMatchFileSnapshot(
     snapshotPath
   );
+
+  doPaste(
+    editor._tiptapEditor.view,
+    md,
+    null,
+    true,
+    new ClipboardEvent("paste")
+  );
+
+  const pastedSnapshotPath = "./__snapshots__/pasted/" + snapshotName + ".json";
+  expect(JSON.stringify(editor.document, undefined, 2)).toMatchFileSnapshot(
+    pastedSnapshotPath
+  );
+
   editor.mount(undefined);
 }
 

package/src/api/testUtil/paste.ts

@@ -0,0 +1,46 @@
+import { Slice } from "@tiptap/pm/model";
+import { EditorView } from "@tiptap/pm/view";
+import * as pmView from "@tiptap/pm/view";
+
+function sliceSingleNode(slice: Slice) {
+  return slice.openStart === 0 &&
+    slice.openEnd === 0 &&
+    slice.content.childCount === 1
+    ? slice.content.firstChild
+    : null;
+}
+
+// This function is a copy of the `doPaste` function from `@tiptap/pm/view`,
+// but made to work in a JSDOM environment. To do this, the `tr.scrollIntoView`
+// call has been removed.
+// https://github.com/ProseMirror/prosemirror-view/blob/17b508f618c944c54776f8ddac45edcb49970796/src/input.ts#L624
+export function doPaste(
+  view: EditorView,
+  text: string,
+  html: string | null,
+  preferPlain: boolean,
+  event: ClipboardEvent
+) {
+  const slice = (pmView as any).__parseFromClipboard(
+    view,
+    text,
+    html,
+    preferPlain,
+    view.state.selection.$from
+  );
+  if (
+    view.someProp("handlePaste", (f) => f(view, event, slice || Slice.empty))
+  ) {
+    return true;
+  }
+  if (!slice) {
+    return false;
+  }
+
+  const singleNode = sliceSingleNode(slice);
+  const tr = singleNode
+    ? view.state.tr.replaceSelectionWith(singleNode, preferPlain)
+    : view.state.tr.replaceSelection(slice);
+  view.dispatch(tr.setMeta("paste", true).setMeta("uiEvent", "paste"));
+  return true;
+}

package/src/blocks/TableBlockContent/TableBlockContent.ts

@@ -46,7 +46,6 @@ const TableParagraph = Node.create({
 
   parseHTML() {
     return [
-      { tag: "td" },
       {
         tag: "p",
         getAttrs: (element) => {

package/src/editor/BlockNoteExtensions.ts

@@ -11,9 +11,9 @@ import { History } from "@tiptap/extension-history";
 import { Link } from "@tiptap/extension-link";
 import { Text } from "@tiptap/extension-text";
 import * as Y from "yjs";
-import { createCopyToClipboardExtension } from "../api/exporters/copyExtension";
-import { createDropFileExtension } from "../api/parsers/fileDropExtension";
-import { createPasteFromClipboardExtension } from "../api/parsers/pasteExtension";
+import { createCopyToClipboardExtension } from "../api/clipboard/toClipboard/copyExtension";
+import { createDropFileExtension } from "../api/clipboard/fromClipboard/fileDropExtension";
+import { createPasteFromClipboardExtension } from "../api/clipboard/fromClipboard/pasteExtension";
 import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension";
 import { TextAlignmentExtension } from "../extensions/TextAlignment/TextAlignmentExtension";
 import { TextColorExtension } from "../extensions/TextColor/TextColorExtension";

package/src/editor/transformPasted.ts

@@ -1,4 +1,4 @@
-import { Fragment, Slice } from "@tiptap/pm/model";
+import { Fragment, Schema, Slice } from "@tiptap/pm/model";
 import { EditorView } from "@tiptap/pm/view";
 
 // helper function to remove a child from a fragment
@@ -12,6 +12,37 @@ function removeChild(node: Fragment, n: number) {
   return Fragment.from(children);
 }
 
+/**
+ * Wrap adjacent tableRow items in a table.
+ *
+ * This makes sure the content that we paste is always a table (and not a tableRow)
+ * A table works better for the remaing paste handling logic, as it's actually a blockContent node
+ */
+export function wrapTableRows(f: Fragment, schema: Schema) {
+  const newItems: any[] = [];
+  for (let i = 0; i < f.childCount; i++) {
+    if (f.child(i).type.name === "tableRow") {
+      if (
+        newItems.length > 0 &&
+        newItems[newItems.length - 1].type.name === "table"
+      ) {
+        // append to existing table
+        const prevTable = newItems[newItems.length - 1];
+        const newTable = prevTable.copy(prevTable.content.addToEnd(f.child(i)));
+        newItems[newItems.length - 1] = newTable;
+      } else {
+        // create new table to wrap tableRow with
+        const newTable = schema.nodes.table.create(undefined, f.child(i));
+        newItems.push(newTable);
+      }
+    } else {
+      newItems.push(f.child(i));
+    }
+  }
+  f = Fragment.from(newItems);
+  return f;
+}
+
 /**
  * fix for https://github.com/ProseMirror/prosemirror/issues/1430#issuecomment-1822570821
  *
@@ -23,6 +54,8 @@ function removeChild(node: Fragment, n: number) {
  */
 export function transformPasted(slice: Slice, view: EditorView) {
   let f = Fragment.from(slice.content);
+  f = wrapTableRows(f, view.state.schema);
+
   for (let i = 0; i < f.childCount; i++) {
     if (f.child(i).type.spec.group === "blockContent") {
       const content = [f.child(i)];
@@ -54,6 +87,5 @@ export function transformPasted(slice: Slice, view: EditorView) {
       f = f.replaceChild(i, container);
     }
   }
-
   return new Slice(f, slice.openStart, slice.openEnd);
 }

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -2,9 +2,9 @@ import { PluginView } from "@tiptap/pm/state";
 import { Node } from "prosemirror-model";
 import { NodeSelection, Plugin, PluginKey, Selection } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
+import * as pmView from "prosemirror-view";
 
 import { createExternalHTMLExporter } from "../../api/exporters/html/externalHTMLExporter";
-import { createInternalHTMLSerializer } from "../../api/exporters/html/internalHTMLSerializer";
 import { cleanHTMLToMarkdown } from "../../api/exporters/markdown/markdownExporter";
 import { getBlockInfoFromPos } from "../../api/getBlockInfoFromPos";
 import { Block } from "../../blocks/defaultBlocks";
@@ -227,11 +227,10 @@ function dragStart<
     const selectedSlice = view.state.selection.content();
     const schema = editor.pmSchema;
 
-    const internalHTMLSerializer = createInternalHTMLSerializer(schema, editor);
-    const internalHTML = internalHTMLSerializer.serializeProseMirrorFragment(
-      selectedSlice.content,
-      {}
-    );
+    const clipboardHML = (pmView as any).__serializeForClipboard(
+      view,
+      selectedSlice
+    ).dom.innerHTML;
 
     const externalHTMLExporter = createExternalHTMLExporter(schema, editor);
     const externalHTML = externalHTMLExporter.exportProseMirrorFragment(
@@ -242,7 +241,7 @@ function dragStart<
     const plainText = cleanHTMLToMarkdown(externalHTML);
 
     e.dataTransfer.clearData();
-    e.dataTransfer.setData("blocknote/html", internalHTML);
+    e.dataTransfer.setData("blocknote/html", clipboardHML);
     e.dataTransfer.setData("text/html", externalHTML);
     e.dataTransfer.setData("text/plain", plainText);
     e.dataTransfer.effectAllowed = "move";

package/src/schema/blocks/createSpec.ts

@@ -154,15 +154,24 @@ export function createBlockSpec<
       return getParseRules(blockConfig, blockImplementation.parse);
     },
 
-    renderHTML() {
-      // renderHTML is not really used, as we always use a nodeView, and we use toExternalHTML / toInternalHTML for serialization
-      // There's an edge case when this gets called nevertheless; before the nodeviews have been mounted
-      // this is why we implement it with a temporary placeholder
+    renderHTML({ HTMLAttributes }) {
+      // renderHTML is used for copy/pasting content from the editor back into
+      // the editor, so we need to make sure the `blockContent` element is
+      // structured correctly as this is what's used for parsing blocks. We
+      // just render a placeholder div inside as the `blockContent` element
+      // already has all the information needed for proper parsing.
       const div = document.createElement("div");
       div.setAttribute("data-tmp-placeholder", "true");
-      return {
-        dom: div,
-      };
+      return wrapInBlockStructure(
+        {
+          dom: div,
+        },
+        blockConfig.type,
+        {},
+        blockConfig.propSchema,
+        blockConfig.isFileBlock,
+        HTMLAttributes
+      );
     },
 
     addNodeView() {

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

@@ -0,0 +1 @@
+export {};

package/types/src/api/clipboard/fromClipboard/fileDropExtension.d.ts

@@ -0,0 +1,6 @@
+import { Extension } from "@tiptap/core";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { InlineContentSchema, StyleSchema } from "../../../schema";
+export declare const createDropFileExtension: <BSchema extends Record<string, import("../../../schema").BlockConfig>, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>) => Extension<{
+    editor: BlockNoteEditor<BSchema, I, S>;
+}, undefined>;

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

@@ -1,3 +1,3 @@
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
 export declare function handleFileInsertion<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(event: DragEvent | ClipboardEvent, editor: BlockNoteEditor<BSchema, I, S>): Promise<void>;

package/types/src/api/clipboard/fromClipboard/pasteExtension.d.ts

@@ -0,0 +1,6 @@
+import { Extension } from "@tiptap/core";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { InlineContentSchema, StyleSchema } from "../../../schema";
+export declare const createPasteFromClipboardExtension: <BSchema extends Record<string, import("../../../schema").BlockConfig>, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>) => Extension<{
+    editor: BlockNoteEditor<BSchema, I, S>;
+}, undefined>;

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

@@ -0,0 +1,12 @@
+import { Extension } from "@tiptap/core";
+import { EditorView } from "prosemirror-view";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
+export declare function selectedFragmentToHTML<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(view: EditorView, editor: BlockNoteEditor<BSchema, I, S>): Promise<{
+    clipboardHTML: string;
+    externalHTML: string;
+    markdown: string;
+}>;
+export declare const createCopyToClipboardExtension: <BSchema extends Record<string, import("../../../schema").BlockConfig>, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>) => Extension<{
+    editor: BlockNoteEditor<BSchema, I, S>;
+}, undefined>;

package/types/src/api/exporters/html/externalHTMLExporter.d.ts

@@ -8,6 +8,7 @@ export interface ExternalHTMLExporter<BSchema extends BlockSchema, I extends Inl
     }) => string;
     exportProseMirrorFragment: (fragment: Fragment, options: {
         document?: Document;
+        simplifyBlocks?: boolean;
     }) => string;
 }
 export declare const createExternalHTMLExporter: <BSchema extends Record<string, import("../../../schema").BlockConfig>, I extends InlineContentSchema, S extends StyleSchema>(schema: Schema, editor: BlockNoteEditor<BSchema, I, S>) => ExternalHTMLExporter<BSchema, I, S>;

package/types/src/api/testUtil/paste.d.ts

@@ -0,0 +1,2 @@
+import { EditorView } from "@tiptap/pm/view";
+export declare function doPaste(view: EditorView, text: string, html: string | null, preferPlain: boolean, event: ClipboardEvent): boolean;

package/types/src/editor/transformPasted.d.ts

@@ -1,5 +1,12 @@
-import { Slice } from "@tiptap/pm/model";
+import { Fragment, Schema, Slice } from "@tiptap/pm/model";
 import { EditorView } from "@tiptap/pm/view";
+/**
+ * Wrap adjacent tableRow items in a table.
+ *
+ * This makes sure the content that we paste is always a table (and not a tableRow)
+ * A table works better for the remaing paste handling logic, as it's actually a blockContent node
+ */
+export declare function wrapTableRows(f: Fragment, schema: Schema): Fragment;
 /**
  * fix for https://github.com/ProseMirror/prosemirror/issues/1430#issuecomment-1822570821
  *

package/src/api/exporters/html/__snapshots_fragment_edge_cases__/selectionLeavesBlockChildren.html

@@ -1 +0,0 @@
-<p>Nested Paragraph 1</p><p>Nested Paragraph 2</p><p>Nested Paragraph 3</p><p>Paragraph 2</p>

package/src/api/exporters/html/__snapshots_fragment_edge_cases__/selectionSpansBlocksChildren.html

@@ -1 +0,0 @@
-<p>Nested Paragraph 1</p><p>Nested Paragraph 2</p><p>Nested Paragraph 3</p><p>Paragraph 2</p><p>Nested Paragraph 1</p><p>Nested Paragraph 2</p><p>Nested Paragraph 3</p>