@blocknote/core 0.15.10 → 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/BlockNoteEditor.ts

@@ -41,9 +41,9 @@ import {
   InlineContentSchema,
   InlineContentSpecs,
   PartialInlineContent,
-  Styles,
   StyleSchema,
   StyleSpecs,
+  Styles,
 } from "../schema";
 import { mergeCSSClasses } from "../util/browser";
 import { NoInfer, UnreachableCaseError } from "../util/typescript";
@@ -463,7 +463,7 @@ export class BlockNoteEditor<
     };
 
     if (!this.headless) {
-      this._tiptapEditor = new BlockNoteTipTapEditor(
+      this._tiptapEditor = BlockNoteTipTapEditor.create(
         tiptapOptions,
         this.schema.styleSchema
       ) as BlockNoteTipTapEditor & {

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/BlockNoteTipTapEditor.ts

@@ -23,7 +23,32 @@ export type BlockNoteTipTapEditorOptions = Partial<
 export class BlockNoteTipTapEditor extends TiptapEditor {
   private _state: EditorState;
 
-  constructor(options: BlockNoteTipTapEditorOptions, styleSchema: StyleSchema) {
+  public static create = (
+    options: BlockNoteTipTapEditorOptions,
+    styleSchema: StyleSchema
+  ) => {
+    // because we separate the constructor from the creation of the view,
+    // we need to patch setTimeout to prevent this code from having any effect:
+    // https://github.com/ueberdosis/tiptap/blob/45bac803283446795ad1b03f43d3746fa54a68ff/packages/core/src/Editor.ts#L117
+    const oldSetTimeout = globalThis?.window?.setTimeout;
+    if (typeof globalThis?.window?.setTimeout !== "undefined") {
+      globalThis.window.setTimeout = (() => {
+        return 0;
+      }) as any;
+    }
+    try {
+      return new BlockNoteTipTapEditor(options, styleSchema);
+    } finally {
+      if (oldSetTimeout) {
+        globalThis.window.setTimeout = oldSetTimeout;
+      }
+    }
+  };
+
+  protected constructor(
+    options: BlockNoteTipTapEditorOptions,
+    styleSchema: StyleSchema
+  ) {
     // possible fix for next.js server side rendering
     // const d = globalThis.document;
     // const w = globalThis.window;
@@ -32,14 +57,10 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
     //     createElement: () => {},
     //   };
     // }
-    // if (!globalThis.window) {
-    //   globalThis.window = {
-    //     setTimeout: () => {},
-    //   };
-    // }
+
     // options.injectCSS = false
-    super({ ...options, content: undefined });
 
+    super({ ...options, content: undefined });
     // try {
     //   globalThis.window = w;
     //   } catch(e) {}
@@ -149,6 +170,12 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
       this.view.updateState(newState);
 
       this.createNodeViews();
+
+      // emit the created event, call here manually because we blocked the default call in the constructor
+      // (https://github.com/ueberdosis/tiptap/blob/45bac803283446795ad1b03f43d3746fa54a68ff/packages/core/src/Editor.ts#L117)
+      this.commands.focus(this.options.autofocus);
+      this.emit("create", { editor: this });
+      this.isInitialized = true;
     });
   }
 

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/extensions/TableHandles/TableHandlesPlugin.ts

@@ -107,6 +107,8 @@ export class TableHandlesView<
 
   public menuFrozen = false;
 
+  public mouseState: "up" | "down" | "selecting" = "up";
+
   public prevWasEditable: boolean | null = null;
 
   constructor(
@@ -127,6 +129,8 @@ export class TableHandlesView<
     };
 
     pmView.dom.addEventListener("mousemove", this.mouseMoveHandler);
+    pmView.dom.addEventListener("mousedown", this.viewMousedownHandler);
+    pmView.dom.addEventListener("mouseup", this.viewMouseupHandler);
 
     pmView.root.addEventListener(
       "dragover",
@@ -140,11 +144,33 @@ export class TableHandlesView<
     pmView.root.addEventListener("scroll", this.scrollHandler, true);
   }
 
+  viewMousedownHandler = () => {
+    this.mouseState = "down";
+  };
+
+  viewMouseupHandler = (event: MouseEvent) => {
+    this.mouseState = "up";
+    this.mouseMoveHandler(event);
+  };
+
   mouseMoveHandler = (event: MouseEvent) => {
     if (this.menuFrozen) {
       return;
     }
 
+    if (this.mouseState === "down") {
+      this.mouseState = "selecting";
+
+      if (this.state?.show) {
+        this.state.show = false;
+        this.emitUpdate();
+      }
+    }
+
+    if (this.mouseState === "selecting") {
+      return;
+    }
+
     const target = domCellAround(event.target as HTMLElement);
 
     if (!target || !this.editor.isEditable) {

package/src/schema/blocks/createSpec.ts

@@ -63,14 +63,10 @@ export type CustomBlockImplementation<
   ) => PartialBlockFromConfig<T, I, S>["props"] | undefined;
 };
 
-// Function that enables copying of selected content within non-selectable
-// blocks.
+// Function that causes events within non-selectable blocks to be handled by the
+// browser instead of the editor.
 export function applyNonSelectableBlockFix(nodeView: NodeView, editor: Editor) {
   nodeView.stopEvent = (event) => {
-    // Ensures copy events are handled by the browser and not by ProseMirror.
-    if (event.type === "copy" || event.type === "cut") {
-      return true;
-    }
     // Blurs the editor on mouse down as the block is non-selectable. This is
     // mainly done to prevent UI elements like the formatting toolbar from being
     // visible while content within a non-selectable block is selected.
@@ -78,9 +74,9 @@ export function applyNonSelectableBlockFix(nodeView: NodeView, editor: Editor) {
       setTimeout(() => {
         editor.view.dom.blur();
       }, 10);
-      return true;
     }
-    return false;
+
+    return true;
   };
 }
 
@@ -158,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;