feat: do not include changes from remote

Author: nperez0111

packages/core/src/editor/BlockNoteEditor.ts

@@ -1616,8 +1616,13 @@ export class BlockNoteEditor<
         getChanges(): BlocksChanged<BSchema, ISchema, SSchema>;
       },
     ) => void,
+    /**
+     * If true, the callback will be triggered when the changes are caused by a remote user
+     * @default true
+     */
+    includeUpdatesFromRemote?: boolean,
   ) {
-    return this._eventManager.onChange(callback);
+    return this._eventManager.onChange(callback, includeUpdatesFromRemote);
   }
 
   /**

packages/core/src/editor/managers/EventManager.ts

@@ -16,13 +16,10 @@ export type Unsubscribe = () => void;
  */
 export class EventManager<Editor extends BlockNoteEditor> extends EventEmitter<{
   onChange: [
-    editor: Editor,
     ctx: {
-      getChanges(): BlocksChanged<
-        Editor["schema"]["blockSchema"],
-        Editor["schema"]["inlineContentSchema"],
-        Editor["schema"]["styleSchema"]
-      >;
+      editor: Editor;
+      transaction: Transaction;
+      appendedTransactions: Transaction[];
     },
   ];
   onSelectionChange: [ctx: { editor: Editor; transaction: Transaction }];
@@ -37,14 +34,7 @@ export class EventManager<Editor extends BlockNoteEditor> extends EventEmitter<{
       editor._tiptapEditor.on(
         "update",
         ({ transaction, appendedTransactions }) => {
-          this.emit("onChange", editor, {
-            getChanges() {
-              return getBlocksChangedByTransaction(
-                transaction,
-                appendedTransactions,
-              );
-            },
-          });
+          this.emit("onChange", { editor, transaction, appendedTransactions });
         },
       );
       editor._tiptapEditor.on("selectionUpdate", ({ transaction }) => {
@@ -73,11 +63,36 @@ export class EventManager<Editor extends BlockNoteEditor> extends EventEmitter<{
         >;
       },
     ) => void,
+    /**
+     * If true, the callback will be triggered when the changes are caused by a remote user
+     * @default true
+     */
+    includeUpdatesFromRemote = true,
   ): Unsubscribe {
-    this.on("onChange", callback);
+    const cb = ({
+      transaction,
+      appendedTransactions,
+    }: {
+      transaction: Transaction;
+      appendedTransactions: Transaction[];
+    }) => {
+      if (!includeUpdatesFromRemote && isRemoteTransaction(transaction)) {
+        // don't trigger the callback if the changes are caused by a remote user
+        return;
+      }
+      callback(this.editor, {
+        getChanges() {
+          return getBlocksChangedByTransaction(
+            transaction,
+            appendedTransactions,
+          );
+        },
+      });
+    };
+    this.on("onChange", cb);
 
     return () => {
-      this.off("onChange", callback);
+      this.off("onChange", cb);
     };
   }
 
@@ -93,11 +108,10 @@ export class EventManager<Editor extends BlockNoteEditor> extends EventEmitter<{
   ): Unsubscribe {
     const cb = (e: { transaction: Transaction }) => {
       if (
-        e.transaction.getMeta("$y-sync") &&
-        !includeSelectionChangedByRemote
+        !includeSelectionChangedByRemote &&
+        isRemoteTransaction(e.transaction)
       ) {
-        // selection changed because of a yjs sync (i.e.: other user was typing)
-        // we don't want to trigger the callback in this case
+        // don't trigger the callback if the selection changed because of a remote user
         return;
       }
       callback(this.editor);
@@ -132,3 +146,7 @@ export class EventManager<Editor extends BlockNoteEditor> extends EventEmitter<{
     };
   }
 }
+
+function isRemoteTransaction(transaction: Transaction): boolean {
+  return !!transaction.getMeta("$y-sync");
+}

packages/core/src/editor/managers/extensions/types.ts

@@ -120,9 +120,11 @@ type InputRule = {
   }) => undefined | PartialBlockNoDefaults<any, any, any>;
 };
 
-export type ExtensionFactory<Key extends string = string, State = any> = (
-  editor: BlockNoteEditor,
-) => Extension<Key, State>;
+export type ExtensionFactory<
+  Key extends string = string,
+  State = any,
+  Options = any,
+> = (editor: BlockNoteEditor, options: Options) => Extension<Key, State>;
 
 /**
  * Helper function to create a BlockNote extension.

packages/core/src/extensions/FilePanel/Extension.ts

@@ -18,14 +18,12 @@ export const FilePanelExtension = createExtension((editor) => {
     });
   }
 
-  // reset the menu when the document changes (non-remote)
-  editor.onChange((_e, { getChanges }) => {
-    if (getChanges().some((change) => change.source.type === "yjs-remote")) {
-      return;
-    }
-    // If the changes are not from remote, we should close the menu
-    closeMenu();
-  });
+  // reset the menu when the document changes
+  editor.onChange(
+    closeMenu,
+    // don't trigger the callback if the changes are caused by a remote user
+    false,
+  );
 
   // reset the menu when the selection changes
   editor.onSelectionChange(closeMenu);