feat: pausing & resuming of a ydoc

examples/07-collaboration/01-partykit/App.tsx

@@ -30,5 +30,27 @@ export default function App() {
   });
 
   // Renders the editor instance.
-  return <BlockNoteView editor={editor} />;
+  return (
+    <>
+      <button
+        onClick={() => {
+          editor.pauseYjsSync();
+        }}>
+        Pause syncing
+      </button>
+      <button
+        onClick={() => {
+          editor.resumeYjsSync(true);
+        }}>
+        Play (accept changes)
+      </button>
+      <button
+        onClick={() => {
+          editor.resumeYjsSync(false);
+        }}>
+        Play (reject changes)
+      </button>
+      <BlockNoteView editor={editor} />
+    </>
+  );
 }

packages/core/src/editor/BlockNoteEditor.ts

@@ -93,6 +93,7 @@ import {
 import { Dictionary } from "../i18n/dictionary.js";
 import { en } from "../i18n/locales/index.js";
 
+import { redo, undo } from "@tiptap/pm/history";
 import {
   TextSelection,
   type Command,
@@ -101,8 +102,14 @@ import {
 } from "@tiptap/pm/state";
 import { dropCursor } from "prosemirror-dropcursor";
 import { EditorView } from "prosemirror-view";
-import { undoCommand, redoCommand, ySyncPluginKey } from "y-prosemirror";
-import { undo, redo } from "@tiptap/pm/history";
+import {
+  redoCommand,
+  undoCommand,
+  yCursorPluginKey,
+  ySyncPlugin,
+  ySyncPluginKey,
+  yUndoPluginKey,
+} from "y-prosemirror";
 import { createInternalHTMLSerializer } from "../api/exporters/html/internalHTMLSerializer.js";
 import { inlineContentToNodes } from "../api/nodeConversions/blockToNode.js";
 import { nodeToBlock } from "../api/nodeConversions/nodeToBlock.js";
@@ -113,9 +120,11 @@ import {
 import { nestedListsToBlockNoteStructure } from "../api/parsers/html/util/nestedLists.js";
 import { CodeBlockOptions } from "../blocks/CodeBlockContent/CodeBlockContent.js";
 import type { ThreadStore, User } from "../comments/index.js";
+import { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
 import "../style.css";
 import { EventEmitter } from "../util/EventEmitter.js";
-import { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
+import { SyncPlugin } from "../extensions/Collaboration/SyncPlugin.js";
+import { UndoPlugin } from "../extensions/Collaboration/UndoPlugin.js";
 
 export type BlockNoteExtensionFactory = (
   editor: BlockNoteEditor<any, any, any>
@@ -474,7 +483,7 @@ export class BlockNoteEditor<
 
   private readonly showSelectionPlugin: ShowSelectionPlugin;
 
-  private readonly cursorPlugin: CursorPlugin;
+  private cursorPlugin: CursorPlugin;
 
   /**
    * The `uploadFile` method is what the editor uses when files need to be uploaded (for example when selecting an image to upload).
@@ -934,6 +943,96 @@ export class BlockNoteEditor<
     };
   }
 
+  /**
+   * To find a fragment in another ydoc, we need to search for it.
+   */
+  private findTypeInOtherYdoc<T extends Y.AbstractType<any>>(
+    ytype: T,
+    otherYdoc: Y.Doc
+  ): T {
+    const ydoc = ytype.doc!;
+    if (ytype._item === null) {
+      /**
+       * If is a root type, we need to find the root key in the original ydoc
+       * and use it to get the type in the other ydoc.
+       */
+      const rootKey = Array.from(ydoc.share.keys()).find(
+        (key) => ydoc.share.get(key) === ytype
+      );
+      if (rootKey == null) {
+        throw new Error("type does not exist in other ydoc");
+      }
+      return otherYdoc.get(rootKey, ytype.constructor as new () => T) as T;
+    } else {
+      /**
+       * If it is a sub type, we use the item id to find the history type.
+       */
+      const ytypeItem = ytype._item;
+      const otherStructs =
+        otherYdoc.store.clients.get(ytypeItem.id.client) ?? [];
+      const itemIndex = Y.findIndexSS(otherStructs, ytypeItem.id.clock);
+      const otherItem = otherStructs[itemIndex] as Y.Item;
+      const otherContent = otherItem.content as Y.ContentType;
+      return otherContent.type as T;
+    }
+  }
+
+  public get isRemoteSyncing() {
+    return this.yjsState !== undefined;
+  }
+
+  private yjsState:
+    | {
+        prevFragment: Y.XmlFragment;
+        nextFragment: Y.XmlFragment;
+      }
+    | undefined;
+
+  public pauseYjsSync() {
+    if (this.isRemoteSyncing) {
+      return;
+    }
+
+    const prevFragment = this.options.collaboration?.fragment;
+
+    if (!prevFragment) {
+      throw new Error("No Yjs document found");
+    }
+
+    const update = Y.encodeStateAsUpdate(prevFragment.doc!);
+
+    const doc = new Y.Doc();
+    Y.applyUpdate(doc, update);
+
+    const nextFragment = this.findTypeInOtherYdoc(prevFragment, doc);
+
+    this.yjsState = {
+      prevFragment,
+      nextFragment,
+    };
+    this._tiptapEditor.unregisterPlugin(yCursorPluginKey);
+    this._tiptapEditor.unregisterPlugin(yUndoPluginKey);
+    this._tiptapEditor.unregisterPlugin(ySyncPluginKey);
+    this._tiptapEditor.registerPlugin(ySyncPlugin(nextFragment));
+  }
+
+  public resumeYjsSync(mergeChanges = false) {
+    if (!this.yjsState) {
+      throw new Error("No Yjs document found");
+    }
+    this._tiptapEditor.unregisterPlugin(ySyncPluginKey);
+    const fragment = this.yjsState.prevFragment;
+    if (mergeChanges) {
+      const update = Y.encodeStateAsUpdate(this.yjsState.nextFragment.doc!);
+      Y.applyUpdate(fragment.doc!, update);
+    }
+    this._tiptapEditor.registerPlugin(new SyncPlugin(fragment).plugin);
+    this.cursorPlugin = new CursorPlugin(this.options.collaboration!);
+    this._tiptapEditor.registerPlugin(this.cursorPlugin.plugin);
+    this._tiptapEditor.registerPlugin(new UndoPlugin().plugin);
+    this.yjsState = undefined;
+  }
+
   /**
    * @deprecated, use `editor.document` instead
    */