feat: implement the dispatchTransaction method from Tiptap to provide a new v3-update method

Author: nperez0111

packages/core/src/api/nodeUtil.ts

@@ -142,7 +142,8 @@ export function getBlocksChangedByTransaction<
   SSchema extends StyleSchema = DefaultStyleSchema
 >(
   transaction: Transaction,
-  editor: BlockNoteEditor<BSchema, ISchema, SSchema>
+  editor: BlockNoteEditor<BSchema, ISchema, SSchema>,
+  appendedTransactions: Transaction[] = []
 ): BlocksChanged<BSchema, ISchema, SSchema> {
   let source: BlockChangeSource = { type: "local" };
 
@@ -163,11 +164,9 @@ export function getBlocksChangedByTransaction<
   }
 
   const changes: BlocksChanged<BSchema, ISchema, SSchema> = [];
-  // TODO when we upgrade to Tiptap v3, we can get the appendedTransactions which would give us things like the actual inserted Block IDs.
-  // since they are appended to the transaction via the unique-id plugin
   const combinedTransaction = combineTransactionSteps(transaction.before, [
     transaction,
-    ...[] /*appendedTransactions*/,
+    ...appendedTransactions,
   ]);
 
   let prevAffectedBlocks: Block<BSchema, ISchema, SSchema>[] = [];

packages/core/src/editor/BlockNoteEditor.ts

@@ -1482,16 +1482,27 @@ export class BlockNoteEditor<
       return;
     }
 
-    const cb = ({ transaction }: { transaction: Transaction }) => {
+    const cb = ({
+      transaction,
+      appendedTransactions,
+    }: {
+      transaction: Transaction;
+      appendedTransactions: Transaction[];
+    }) => {
       callback(this, {
-        getChanges: () => getBlocksChangedByTransaction(transaction, this),
+        getChanges: () =>
+          getBlocksChangedByTransaction(
+            transaction,
+            this,
+            appendedTransactions
+          ),
       });
     };
 
-    this._tiptapEditor.on("update", cb);
+    this._tiptapEditor.on("v3-update", cb);
 
     return () => {
-      this._tiptapEditor.off("update", cb);
+      this._tiptapEditor.off("v3-update", cb);
     };
   }
 

packages/core/src/editor/BlockNoteTipTapEditor.ts

@@ -1,5 +1,4 @@
-import { EditorOptions, createDocument } from "@tiptap/core";
-// import "./blocknote.css";
+import { Editor, EditorOptions, createDocument } from "@tiptap/core";
 import { Editor as TiptapEditor } from "@tiptap/core";
 
 import { Node } from "@tiptap/pm/model";
@@ -138,13 +137,83 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
     return this._state;
   }
 
-  dispatch(tr: Transaction) {
-    if (this.view) {
-      this.view.dispatch(tr);
-    } else {
+  dispatch(transaction: Transaction) {
+    if (!this.view) {
       // before view has been initialized
-      this._state = this.state.apply(tr);
+      this._state = this.state.apply(transaction);
+      return;
+    }
+    // This is a verbatim copy of the default dispatch method, but with the following changes:
+    // - We provide the appendedTransactions to a new `v3-update` event
+    // In the future, we can remove this dispatch method entirely and rely on the new `update` event signature which does what we want by providing the appendedTransactions
+    ////////////////////////////////////////////////////////////////////////////////
+    // if the editor / the view of the editor was destroyed
+    // the transaction should not be dispatched as there is no view anymore.
+    if (this.view.isDestroyed) {
+      return;
+    }
+
+    if (this.isCapturingTransaction) {
+      // Do the default capture behavior
+      (this as any).dispatchTransaction(transaction);
+
+      return;
+    }
+
+    const { state, transactions: appendedTransactions } =
+      this.state.applyTransaction(transaction);
+    const selectionHasChanged = !this.state.selection.eq(state.selection);
+
+    this.emit("beforeTransaction", {
+      editor: this,
+      transaction,
+      nextState: state,
+    });
+    this.view.updateState(state);
+    this.emit("transaction", {
+      editor: this,
+      transaction,
+    });
+
+    if (selectionHasChanged) {
+      this.emit("selectionUpdate", {
+        editor: this,
+        transaction,
+      });
+    }
+
+    const focus = transaction.getMeta("focus");
+    const blur = transaction.getMeta("blur");
+
+    if (focus) {
+      this.emit("focus", {
+        editor: this,
+        event: focus.event,
+        transaction,
+      });
+    }
+
+    if (blur) {
+      this.emit("blur", {
+        editor: this,
+        event: blur.event,
+        transaction,
+      });
     }
+
+    if (!transaction.docChanged || transaction.getMeta("preventUpdate")) {
+      return;
+    }
+
+    this.emit("update", {
+      editor: this,
+      transaction,
+    });
+    this.emit("v3-update", {
+      editor: this,
+      transaction,
+      appendedTransactions: appendedTransactions.slice(1),
+    });
   }
 
   /**
@@ -171,7 +240,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
       {
         ...this.options.editorProps,
         // @ts-ignore
-        dispatchTransaction: this.dispatchTransaction.bind(this),
+        dispatchTransaction: this.dispatch.bind(this),
         state: this.state,
         markViews,
         nodeViews: this.extensionManager.nodeViews,
@@ -228,3 +297,17 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
   // (note: can probably be removed after tiptap upgrade fixed in 2.8.0)
   this.options.onPaste = this.options.onDrop = undefined;
 };
+
+declare module "@tiptap/core" {
+  interface EditorEvents {
+    /**
+     * This is a custom event that will be emitted in Tiptap V3.
+     * We use it to provide the appendedTransactions, until Tiptap V3 is released.
+     */
+    "v3-update": {
+      editor: Editor;
+      transaction: Transaction;
+      appendedTransactions: Transaction[];
+    };
+  }
+}