chore: upgrade tiptap 2.5.0 (#923)

* upgrade tiptap and y-prosemirror

* fix build

* fix: overwrite createView of tiptapeditor separately

* fix test

Author: YousefED

package-lock.json

@@ -54,27 +54,27 @@
     "clean": "rimraf dist && rimraf types"
   },
   "dependencies": {
+    "@tiptap/core": "^2.5.0",
+    "@tiptap/extension-bold": "^2.5.0",
+    "@tiptap/extension-code": "^2.5.0",
+    "@tiptap/extension-collaboration": "^2.5.0",
+    "@tiptap/extension-collaboration-cursor": "^2.5.0",
+    "@tiptap/extension-dropcursor": "^2.5.0",
+    "@tiptap/extension-gapcursor": "^2.5.0",
+    "@tiptap/extension-hard-break": "^2.5.0",
+    "@tiptap/extension-history": "^2.5.0",
+    "@tiptap/extension-horizontal-rule": "^2.5.0",
+    "@tiptap/extension-italic": "^2.5.0",
+    "@tiptap/extension-link": "^2.5.0",
+    "@tiptap/extension-paragraph": "^2.5.0",
+    "@tiptap/extension-strike": "^2.5.0",
+    "@tiptap/extension-table-cell": "^2.5.0",
+    "@tiptap/extension-table-header": "^2.5.0",
+    "@tiptap/extension-table-row": "^2.5.0",
+    "@tiptap/extension-text": "^2.5.0",
+    "@tiptap/extension-underline": "^2.5.0",
+    "@tiptap/pm": "^2.5.0",
     "@emoji-mart/data": "^1.2.1",
-    "@tiptap/core": "^2.4.0",
-    "@tiptap/extension-bold": "^2.4.0",
-    "@tiptap/extension-code": "^2.4.0",
-    "@tiptap/extension-collaboration": "^2.4.0",
-    "@tiptap/extension-collaboration-cursor": "^2.4.0",
-    "@tiptap/extension-dropcursor": "^2.4.0",
-    "@tiptap/extension-gapcursor": "^2.4.0",
-    "@tiptap/extension-hard-break": "^2.4.0",
-    "@tiptap/extension-history": "^2.4.0",
-    "@tiptap/extension-horizontal-rule": "^2.4.0",
-    "@tiptap/extension-italic": "^2.4.0",
-    "@tiptap/extension-link": "^2.4.0",
-    "@tiptap/extension-paragraph": "^2.4.0",
-    "@tiptap/extension-strike": "^2.4.0",
-    "@tiptap/extension-table-cell": "^2.4.0",
-    "@tiptap/extension-table-header": "^2.4.0",
-    "@tiptap/extension-table-row": "^2.4.0",
-    "@tiptap/extension-text": "^2.4.0",
-    "@tiptap/extension-underline": "^2.4.0",
-    "@tiptap/pm": "^2.4.0",
     "emoji-mart": "^5.6.0",
     "hast-util-from-dom": "^4.2.0",
     "prosemirror-model": "^1.21.0",
@@ -92,7 +92,7 @@
     "remark-stringify": "^10.0.2",
     "unified": "^10.1.2",
     "uuid": "^8.3.2",
-    "y-prosemirror": "1.2.5",
+    "y-prosemirror": "1.2.9",
     "y-protocols": "^1.0.6",
     "yjs": "^13.6.15"
   },

packages/core/package.json

@@ -23,42 +23,45 @@ export function insertBlocks<
   placement: "before" | "after" | "nested" = "before",
   editor: BlockNoteEditor<BSchema, I, S>
 ): Block<BSchema, I, S>[] {
-  const ttEditor = editor._tiptapEditor;
-
   const id =
     typeof referenceBlock === "string" ? referenceBlock : referenceBlock.id;
 
   const nodesToInsert: Node[] = [];
   for (const blockSpec of blocksToInsert) {
     nodesToInsert.push(
-      blockToNode(blockSpec, ttEditor.schema, editor.schema.styleSchema)
+      blockToNode(blockSpec, editor.pmSchema, editor.schema.styleSchema)
     );
   }
 
-  const { node, posBeforeNode } = getNodeById(id, ttEditor.state.doc);
+  const { node, posBeforeNode } = getNodeById(
+    id,
+    editor._tiptapEditor.state.doc
+  );
 
   if (placement === "before") {
-    ttEditor.view.dispatch(
-      ttEditor.state.tr.insert(posBeforeNode, nodesToInsert)
+    editor.dispatch(
+      editor._tiptapEditor.state.tr.insert(posBeforeNode, nodesToInsert)
     );
   }
 
   if (placement === "after") {
-    ttEditor.view.dispatch(
-      ttEditor.state.tr.insert(posBeforeNode + node.nodeSize, nodesToInsert)
+    editor.dispatch(
+      editor._tiptapEditor.state.tr.insert(
+        posBeforeNode + node.nodeSize,
+        nodesToInsert
+      )
     );
   }
 
   if (placement === "nested") {
     // Case if block doesn't already have children.
     if (node.childCount < 2) {
-      const blockGroupNode = ttEditor.state.schema.nodes["blockGroup"].create(
-        {},
-        nodesToInsert
-      );
+      const blockGroupNode = editor._tiptapEditor.state.schema.nodes[
+        "blockGroup"
+      ].create({}, nodesToInsert);
 
-      ttEditor.view.dispatch(
-        ttEditor.state.tr.insert(
+      editor.dispatch(
+        editor._tiptapEditor.state.tr.insert(
           posBeforeNode + node.firstChild!.nodeSize + 1,
           blockGroupNode
         )
@@ -186,7 +189,7 @@ function removeBlocksWithCallback<
     );
   }
 
-  ttEditor.view.dispatch(tr);
+  editor.dispatch(tr);
 
   return removedBlocks;
 }
@@ -214,12 +217,10 @@ export function replaceBlocks<
   insertedBlocks: Block<BSchema, I, S>[];
   removedBlocks: Block<BSchema, I, S>[];
 } {
-  const ttEditor = editor._tiptapEditor;
-
   const nodesToInsert: Node[] = [];
   for (const block of blocksToInsert) {
     nodesToInsert.push(
-      blockToNode(block, ttEditor.schema, editor.schema.styleSchema)
+      blockToNode(block, editor.pmSchema, editor.schema.styleSchema)
     );
   }
 
@@ -274,8 +275,7 @@ export function insertContentAt<
     updateSelection: boolean;
   } = { updateSelection: true }
 ) {
-  const ttEditor = editor._tiptapEditor;
-  const tr = ttEditor.state.tr;
+  const tr = editor._tiptapEditor.state.tr;
 
   // don’t dispatch an empty fragment because this can lead to strange errors
   // if (content.toString() === "<>") {
@@ -344,7 +344,7 @@ export function insertContentAt<
     selectionToInsertionEnd(tr, tr.steps.length - 1, -1);
   }
 
-  ttEditor.view.dispatch(tr);
+  editor.dispatch(tr);
 
   return true;
 }

packages/core/src/api/blockManipulation/blockManipulation.ts

@@ -74,8 +74,8 @@ export const createCopyToClipboardExtension = <
                   (view.state.selection.node as Node).type.spec.group ===
                     "blockContent"
                 ) {
-                  view.dispatch(
-                    view.state.tr.setSelection(
+                  editor.dispatch(
+                    editor._tiptapEditor.state.tr.setSelection(
                       new NodeSelection(
                         view.state.doc.resolve(view.state.selection.from - 1)
                       )
@@ -113,8 +113,8 @@ export const createCopyToClipboardExtension = <
                 }
 
                 // Expands the selection to the parent `blockContainer` node.
-                view.dispatch(
-                  view.state.tr.setSelection(
+                editor.dispatch(
+                  editor._tiptapEditor.state.tr.setSelection(
                     new NodeSelection(
                       view.state.doc.resolve(view.state.selection.from - 1)
                     )

packages/core/src/api/exporters/copyExtension.ts

@@ -177,7 +177,7 @@ describe("Test ProseMirror fragment edge case conversion", () => {
 
     it("Selection within a block's children", () => {
       // Selection starts and ends within the first block's children.
-      editor.prosemirrorView.dispatch(
+      editor.dispatch(
         editor._tiptapEditor.state.tr.setSelection(
           TextSelection.create(editor._tiptapEditor.state.doc, 18, 80)
         )
@@ -200,7 +200,7 @@ describe("Test ProseMirror fragment edge case conversion", () => {
     it("Selection leaves a block's children", () => {
       // Selection starts and ends within the first block's children and ends
       // outside, at a shallower nesting level in the second block.
-      editor.prosemirrorView.dispatch(
+      editor.dispatch(
         editor._tiptapEditor.state.tr.setSelection(
           TextSelection.create(editor._tiptapEditor.state.doc, 18, 97)
         )
@@ -223,7 +223,7 @@ describe("Test ProseMirror fragment edge case conversion", () => {
     it("Selection spans multiple blocks' children", () => {
       // Selection starts and ends within the first block's children and ends
       // within the second block's children.
-      editor.prosemirrorView.dispatch(
+      editor.dispatch(
         editor._tiptapEditor.state.tr.setSelection(
           TextSelection.create(editor._tiptapEditor.state.doc, 18, 163)
         )

packages/core/src/api/exporters/html/htmlConversion.test.ts

@@ -33,16 +33,15 @@ async function parseHTMLAndCompareSnapshots(
 
   (window as any).__TEST_OPTIONS.mockID = 0; // reset id counter
   const htmlNode = nestedListsToBlockNoteStructure(html);
-  const tt = editor._tiptapEditor;
 
   const slice = view.__parseFromClipboard(
-    tt.view,
+    editor.prosemirrorView,
     "",
     htmlNode.innerHTML,
     false,
-    tt.view.state.selection.$from
+    editor._tiptapEditor.state.selection.$from
   );
-  tt.view.dispatch(tt.view.state.tr.replaceSelection(slice));
+  editor.dispatch(editor._tiptapEditor.state.tr.replaceSelection(slice));
 
   // alternative paste simulation doesn't work in a non-browser vitest env
   //   editor._tiptapEditor.view.pasteHTML(html, {

packages/core/src/api/parsers/html/parseHTML.test.ts

@@ -75,7 +75,7 @@ export const createAddFileButton = (
   };
   // Opens the file toolbar.
   const addFileButtonClickHandler = () => {
-    editor._tiptapEditor.view.dispatch(
+    editor.dispatch(
       editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
         block: block,
       })

packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts

@@ -1,6 +1,6 @@
 import { expect, it } from "vitest";
-import { BlockNoteEditor } from "./BlockNoteEditor";
 import { getBlockInfoFromPos } from "../api/getBlockInfoFromPos";
+import { BlockNoteEditor } from "./BlockNoteEditor";
 
 /**
  * @vitest-environment jsdom
@@ -10,3 +10,50 @@ it("creates an editor", () => {
   const blockInfo = getBlockInfoFromPos(editor._tiptapEditor.state.doc, 2);
   expect(blockInfo?.contentNode.type.name).toEqual("paragraph");
 });
+
+it("immediately replaces doc", async () => {
+  const editor = BlockNoteEditor.create();
+  const blocks = await editor.tryParseMarkdownToBlocks(
+    "This is a normal text\n\n# And this is a large heading"
+  );
+  editor.replaceBlocks(editor.document, blocks);
+  expect(editor.document).toMatchInlineSnapshot(`
+    [
+      {
+        "children": [],
+        "content": [
+          {
+            "styles": {},
+            "text": "This is a normal text",
+            "type": "text",
+          },
+        ],
+        "id": "1",
+        "props": {
+          "backgroundColor": "default",
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "type": "paragraph",
+      },
+      {
+        "children": [],
+        "content": [
+          {
+            "styles": {},
+            "text": "And this is a large heading",
+            "type": "text",
+          },
+        ],
+        "id": "2",
+        "props": {
+          "backgroundColor": "default",
+          "level": 1,
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "type": "heading",
+      },
+    ]
+  `);
+});

packages/core/src/editor/BlockNoteEditor.test.ts

@@ -65,6 +65,7 @@ import { PlaceholderPlugin } from "../extensions/Placeholder/PlaceholderPlugin";
 import { Dictionary } from "../i18n/dictionary";
 import { en } from "../i18n/locales";
 
+import { Transaction } from "@tiptap/pm/state";
 import { createInternalHTMLSerializer } from "../api/exporters/html/internalHTMLSerializer";
 import "../style.css";
 
@@ -428,6 +429,10 @@ export class BlockNoteEditor<
     }
   }
 
+  dispatch(tr: Transaction) {
+    this._tiptapEditor.dispatch(tr);
+  }
+
   /**
    * Mount the editor to a parent DOM element. Call mount(undefined) to clean up
    *
@@ -954,8 +959,8 @@ export class BlockNoteEditor<
 
     const mark = this.pmSchema.mark("link", { href: url });
 
-    this._tiptapEditor.view.dispatch(
-      this._tiptapEditor.view.state.tr
+    this.dispatch(
+      this._tiptapEditor.state.tr
         .insertText(text, from, to)
         .addMark(from, from + text.length, mark)
     );

packages/core/src/editor/BlockNoteEditor.ts

@@ -3,8 +3,8 @@ import { EditorOptions, createDocument } from "@tiptap/core";
 import { Editor as TiptapEditor } from "@tiptap/core";
 import { Node } from "@tiptap/pm/model";
 import { EditorView } from "@tiptap/pm/view";
-import { EditorState } from "prosemirror-state";
 
+import { EditorState, Transaction } from "@tiptap/pm/state";
 import { blockToNode } from "../api/nodeConversions/nodeConversions";
 import { PartialBlock } from "../blocks/defaultBlocks";
 import { StyleSchema } from "../schema";
@@ -115,10 +115,13 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
     return this._state;
   }
 
-  createView() {
-    // no-op
-    // Disable default call to `createView` in the Editor constructor.
-    // We should call `createView` manually only when a DOM element is available
+  dispatch(tr: Transaction) {
+    if (this.view) {
+      this.view.dispatch(tr);
+    } else {
+      // before view has been initialized
+      this._state = this.state.apply(tr);
+    }
   }
 
   /**
@@ -164,3 +167,9 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
     }
   };
 }
+
+(BlockNoteTipTapEditor.prototype as any).createView = () => {
+  // no-op
+  // Disable default call to `createView` in the Editor constructor.
+  // We should call `createView` manually only when a DOM element is available
+};