@blocknote/core 0.30.0 → 0.31.0

package/src/extensions/Collaboration/ForkYDocPlugin.test.ts

@@ -0,0 +1,166 @@
+import { expect, it } from "vitest";
+import * as Y from "yjs";
+import { Awareness } from "y-protocols/awareness";
+import { BlockNoteEditor } from "../../index.js";
+
+/**
+ * @vitest-environment jsdom
+ */
+it("can fork a document", async () => {
+  const doc = new Y.Doc();
+  const fragment = doc.getXmlFragment("doc");
+  const editor = BlockNoteEditor.create({
+    collaboration: {
+      fragment,
+      user: { name: "Hello", color: "#FFFFFF" },
+      provider: {
+        awareness: new Awareness(doc),
+      },
+    },
+  });
+
+  const div = document.createElement("div");
+  editor.mount(div);
+
+  editor.replaceBlocks(editor.document, [
+    {
+      type: "paragraph",
+      content: [{ text: "Hello", styles: {}, type: "text" }],
+    },
+  ]);
+
+  await expect(fragment.toJSON()).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap.html",
+  );
+  await expect(editor.document).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap-editor.json",
+  );
+
+  editor.forkYDocPlugin!.fork();
+
+  editor.replaceBlocks(editor.document, [
+    {
+      type: "paragraph",
+      content: [{ text: "Hello World", styles: {}, type: "text" }],
+    },
+  ]);
+
+  await expect(fragment.toJSON()).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap.html",
+  );
+  await expect(editor.document).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap-editor-forked.json",
+  );
+});
+
+it("can merge a document", async () => {
+  const doc = new Y.Doc();
+  const fragment = doc.getXmlFragment("doc");
+  const editor = BlockNoteEditor.create({
+    collaboration: {
+      fragment,
+      user: { name: "Hello", color: "#FFFFFF" },
+      provider: {
+        awareness: new Awareness(doc),
+      },
+    },
+  });
+
+  const div = document.createElement("div");
+  editor.mount(div);
+
+  editor.replaceBlocks(editor.document, [
+    {
+      type: "paragraph",
+      content: [{ text: "Hello", styles: {}, type: "text" }],
+    },
+  ]);
+
+  await expect(fragment.toJSON()).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap.html",
+  );
+  await expect(editor.document).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap-editor.json",
+  );
+
+  editor.forkYDocPlugin!.fork();
+
+  editor.replaceBlocks(editor.document, [
+    {
+      type: "paragraph",
+      content: [{ text: "Hello World", styles: {}, type: "text" }],
+    },
+  ]);
+
+  await expect(fragment.toJSON()).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap.html",
+  );
+  await expect(editor.document).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap-editor-forked.json",
+  );
+
+  editor.forkYDocPlugin!.merge({ keepChanges: false });
+
+  await expect(fragment.toJSON()).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap.html",
+  );
+  await expect(editor.document).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap-editor.json",
+  );
+});
+
+it("can fork an keep the changes to the original document", async () => {
+  const doc = new Y.Doc();
+  const fragment = doc.getXmlFragment("doc");
+  const editor = BlockNoteEditor.create({
+    collaboration: {
+      fragment,
+      user: { name: "Hello", color: "#FFFFFF" },
+      provider: {
+        awareness: new Awareness(doc),
+      },
+    },
+  });
+
+  const div = document.createElement("div");
+  editor.mount(div);
+
+  editor.replaceBlocks(editor.document, [
+    {
+      type: "paragraph",
+      content: [{ text: "Hello", styles: {}, type: "text" }],
+    },
+  ]);
+
+  await expect(fragment.toJSON()).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap.html",
+  );
+  await expect(editor.document).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap-editor.json",
+  );
+
+  editor.forkYDocPlugin!.fork();
+
+  editor.replaceBlocks(editor.document, [
+    {
+      type: "paragraph",
+      content: [{ text: "Hello World", styles: {}, type: "text" }],
+    },
+  ]);
+
+  await expect(fragment.toJSON()).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap.html",
+  );
+  await expect(editor.document).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap-editor-forked.json",
+  );
+
+  editor.forkYDocPlugin!.merge({ keepChanges: true });
+
+  await expect(fragment.toJSON()).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap-forked.html",
+  );
+  await expect(editor.document).toMatchFileSnapshot(
+    "__snapshots__/fork-yjs-snap-editor-forked.json",
+  );
+});

package/src/extensions/Collaboration/ForkYDocPlugin.ts

@@ -0,0 +1,174 @@
+import * as Y from "yjs";
+
+import {
+  yCursorPluginKey,
+  ySyncPluginKey,
+  yUndoPluginKey,
+} from "y-prosemirror";
+import { CursorPlugin } from "./CursorPlugin.js";
+import { SyncPlugin } from "./SyncPlugin.js";
+import { UndoPlugin } from "./UndoPlugin.js";
+
+import {
+  BlockNoteEditor,
+  BlockNoteEditorOptions,
+} from "../../editor/BlockNoteEditor.js";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+
+export class ForkYDocPlugin extends BlockNoteExtension<{
+  forked: boolean;
+}> {
+  public static name() {
+    return "ForkYDocPlugin";
+  }
+
+  private editor: BlockNoteEditor<any, any, any>;
+  private collaboration: BlockNoteEditorOptions<any, any, any>["collaboration"];
+
+  constructor({
+    editor,
+    collaboration,
+  }: {
+    editor: BlockNoteEditor<any, any, any>;
+    collaboration: BlockNoteEditorOptions<any, any, any>["collaboration"];
+  }) {
+    super(editor);
+    this.editor = editor;
+    this.collaboration = collaboration;
+  }
+
+  /**
+   * 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;
+    }
+  }
+
+  /**
+   * Whether the editor is editing a forked document,
+   * preserving a reference to the original document and the forked document.
+   */
+  public get isForkedFromRemote() {
+    return this.forkedState !== undefined;
+  }
+
+  /**
+   * Stores whether the editor is editing a forked document,
+   * preserving a reference to the original document and the forked document.
+   */
+  private forkedState:
+    | {
+        originalFragment: Y.XmlFragment;
+        forkedFragment: Y.XmlFragment;
+      }
+    | undefined;
+
+  /**
+   * Fork the Y.js document from syncing to the remote,
+   * allowing modifications to the document without affecting the remote.
+   * These changes can later be rolled back or applied to the remote.
+   */
+  public fork() {
+    if (this.isForkedFromRemote) {
+      return;
+    }
+
+    const originalFragment = this.collaboration.fragment;
+
+    if (!originalFragment) {
+      throw new Error("No fragment to fork from");
+    }
+
+    const doc = new Y.Doc();
+    // Copy the original document to a new Yjs document
+    Y.applyUpdate(doc, Y.encodeStateAsUpdate(originalFragment.doc!));
+
+    // Find the forked fragment in the new Yjs document
+    const forkedFragment = this.findTypeInOtherYdoc(originalFragment, doc);
+
+    this.forkedState = {
+      originalFragment,
+      forkedFragment,
+    };
+
+    // Need to reset all the yjs plugins
+    this.editor._tiptapEditor.unregisterPlugin([
+      yCursorPluginKey,
+      yUndoPluginKey,
+      ySyncPluginKey,
+    ]);
+    // Register them again, based on the new forked fragment
+    this.editor._tiptapEditor.registerPlugin(
+      new SyncPlugin(forkedFragment).plugins[0],
+    );
+    this.editor._tiptapEditor.registerPlugin(new UndoPlugin().plugins[0]);
+    // No need to register the cursor plugin again, it's a local fork
+    this.emit("forked", true);
+  }
+
+  /**
+   * Resume syncing the Y.js document to the remote
+   * If `keepChanges` is true, any changes that have been made to the forked document will be applied to the original document.
+   * Otherwise, the original document will be restored and the changes will be discarded.
+   */
+  public merge({ keepChanges }: { keepChanges: boolean }) {
+    if (!this.forkedState) {
+      return;
+    }
+    // Remove the forked fragment's plugins
+    this.editor._tiptapEditor.unregisterPlugin(ySyncPluginKey);
+    this.editor._tiptapEditor.unregisterPlugin(yUndoPluginKey);
+
+    const { originalFragment, forkedFragment } = this.forkedState;
+    if (keepChanges) {
+      // Apply any changes that have been made to the fork, onto the original doc
+      const update = Y.encodeStateAsUpdate(forkedFragment.doc!);
+      Y.applyUpdate(originalFragment.doc!, update);
+    }
+    this.editor.extensions["ySyncPlugin"] = new SyncPlugin(originalFragment);
+    this.editor.extensions["yCursorPlugin"] = new CursorPlugin(
+      this.collaboration!,
+    );
+    this.editor.extensions["yUndoPlugin"] = new UndoPlugin();
+    // Register the plugins again, based on the original fragment
+    this.editor._tiptapEditor.registerPlugin(
+      this.editor.extensions["ySyncPlugin"].plugins[0],
+    );
+    this.editor._tiptapEditor.registerPlugin(
+      this.editor.extensions["yCursorPlugin"].plugins[0],
+    );
+    this.editor._tiptapEditor.registerPlugin(
+      this.editor.extensions["yUndoPlugin"].plugins[0],
+    );
+    // Reset the forked state
+    this.forkedState = undefined;
+    this.emit("forked", false);
+  }
+}

package/src/extensions/Collaboration/SyncPlugin.ts

@@ -1,12 +1,15 @@
-import { Plugin } from "prosemirror-state";
 import { ySyncPlugin } from "y-prosemirror";
 import type * as Y from "yjs";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 
-export class SyncPlugin {
-  public plugin: Plugin;
+export class SyncPlugin extends BlockNoteExtension {
+  public static name() {
+    return "ySyncPlugin";
+  }
 
   constructor(fragment: Y.XmlFragment) {
-    this.plugin = ySyncPlugin(fragment);
+    super();
+    this.addProsemirrorPlugin(ySyncPlugin(fragment));
   }
 
   public get priority() {

package/src/extensions/Collaboration/UndoPlugin.ts

@@ -1,11 +1,14 @@
-import { Plugin } from "prosemirror-state";
 import { yUndoPlugin } from "y-prosemirror";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 
-export class UndoPlugin {
-  public plugin: Plugin;
+export class UndoPlugin extends BlockNoteExtension {
+  public static name() {
+    return "yUndoPlugin";
+  }
 
   constructor() {
-    this.plugin = yUndoPlugin();
+    super();
+    this.addProsemirrorPlugin(yUndoPlugin());
   }
 
   public get priority() {

package/src/extensions/Collaboration/__snapshots__/fork-yjs-snap-editor-forked.json

@@ -0,0 +1,30 @@
+[
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Hello World",
+        "type": "text",
+      },
+    ],
+    "id": "2",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  {
+    "children": [],
+    "content": [],
+    "id": "3",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+]

package/src/extensions/Collaboration/__snapshots__/fork-yjs-snap-editor.json

@@ -0,0 +1,30 @@
+[
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Hello",
+        "type": "text",
+      },
+    ],
+    "id": "0",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  {
+    "children": [],
+    "content": [],
+    "id": "1",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+]

package/src/extensions/Collaboration/__snapshots__/fork-yjs-snap-forked.html

@@ -0,0 +1 @@
+<blockgroup><blockcontainer backgroundColor="default" id="2" textColor="default"><paragraph textAlignment="left">Hello World</paragraph></blockcontainer><blockcontainer backgroundColor="default" id="3" textColor="default"><paragraph textAlignment="left"></paragraph></blockcontainer></blockgroup>

package/src/extensions/Collaboration/__snapshots__/fork-yjs-snap.html

@@ -0,0 +1 @@
+<blockgroup><blockcontainer backgroundColor="default" id="0" textColor="default"><paragraph textAlignment="left">Hello</paragraph></blockcontainer><blockcontainer backgroundColor="default" id="1" textColor="default"><paragraph textAlignment="left"></paragraph></blockcontainer></blockgroup>

package/src/extensions/Comments/CommentsPlugin.ts

@@ -9,7 +9,7 @@ import type {
   User,
 } from "../../comments/index.js";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import { EventEmitter } from "../../util/EventEmitter.js";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 import { UserStore } from "./userstore/UserStore.js";
 
 const PLUGIN_KEY = new PluginKey(`blocknote-comments`);
@@ -56,8 +56,7 @@ function getUpdatedThreadPositions(doc: Node, markType: string) {
   return threadPositions;
 }
 
-export class CommentsPlugin extends EventEmitter<any> {
-  public readonly plugin: Plugin;
+export class CommentsPlugin extends BlockNoteExtension {
   public readonly userStore: UserStore<User>;
 
   /**
@@ -102,7 +101,8 @@ export class CommentsPlugin extends EventEmitter<any> {
               const trimmedFrom = Math.max(pos, 0);
               const trimmedTo = Math.min(
                 pos + node.nodeSize,
-                tr.doc.content.size - 1
+                tr.doc.content.size - 1,
+                tr.doc.content.size - 1,
               );
               tr.removeMark(trimmedFrom, trimmedTo, mark);
               tr.addMark(
@@ -111,7 +111,7 @@ export class CommentsPlugin extends EventEmitter<any> {
                 markType.create({
                   ...mark.attrs,
                   orphan: isOrphan,
-                })
+                }),
               );
 
               if (isOrphan && this.selectedThreadId === markThreadId) {
@@ -129,7 +129,7 @@ export class CommentsPlugin extends EventEmitter<any> {
   constructor(
     private readonly editor: BlockNoteEditor<any, any, any>,
     public readonly threadStore: ThreadStore,
-    private readonly markType: string
+    private readonly markType: string,
   ) {
     super();
 
@@ -156,86 +156,91 @@ export class CommentsPlugin extends EventEmitter<any> {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const self = this;
 
-    this.plugin = new Plugin<CommentsPluginState>({
-      key: PLUGIN_KEY,
-      state: {
-        init() {
-          return {
-            decorations: DecorationSet.empty,
-          };
-        },
-        apply(tr, state) {
-          const action = tr.getMeta(PLUGIN_KEY);
-
-          if (!tr.docChanged && !action) {
-            return state;
-          }
-
-          // only update threadPositions if the doc changed
-          const threadPositions = tr.docChanged
-            ? getUpdatedThreadPositions(tr.doc, self.markType)
-            : self.threadPositions;
+    this.addProsemirrorPlugin(
+      new Plugin<CommentsPluginState>({
+        key: PLUGIN_KEY,
+        state: {
+          init() {
+            return {
+              decorations: DecorationSet.empty,
+            };
+          },
+          apply(tr, state) {
+            const action = tr.getMeta(PLUGIN_KEY);
+
+            if (!tr.docChanged && !action) {
+              return state;
+            }
 
-          if (threadPositions.size > 0 || self.threadPositions.size > 0) {
-            // small optimization; don't emit event if threadPositions before / after were both empty
-            self.threadPositions = threadPositions;
-            self.emitStateUpdate();
-          }
+            // only update threadPositions if the doc changed
+            const threadPositions = tr.docChanged
+              ? getUpdatedThreadPositions(tr.doc, self.markType)
+              : self.threadPositions;
 
-          // update decorations if doc or selected thread changed
-          const decorations = [];
+            if (threadPositions.size > 0 || self.threadPositions.size > 0) {
+              // small optimization; don't emit event if threadPositions before / after were both empty
+              self.threadPositions = threadPositions;
+              self.emitStateUpdate();
+            }
 
-          if (self.selectedThreadId) {
-            const selectedThreadPosition = threadPositions.get(
-              self.selectedThreadId
-            );
+            // update decorations if doc or selected thread changed
+            const decorations = [];
 
-            if (selectedThreadPosition) {
-              decorations.push(
-                Decoration.inline(
-                  selectedThreadPosition.from,
-                  selectedThreadPosition.to,
-                  {
-                    class: "bn-thread-mark-selected",
-                  }
-                )
+            if (self.selectedThreadId) {
+              const selectedThreadPosition = threadPositions.get(
+                self.selectedThreadId,
               );
+
+              if (selectedThreadPosition) {
+                decorations.push(
+                  Decoration.inline(
+                    selectedThreadPosition.from,
+                    selectedThreadPosition.to,
+                    {
+                      class: "bn-thread-mark-selected",
+                    },
+                  ),
+                );
+              }
             }
-          }
 
-          return {
-            decorations: DecorationSet.create(tr.doc, decorations),
-          };
-        },
-      },
-      props: {
-        decorations(state) {
-          return PLUGIN_KEY.getState(state)?.decorations ?? DecorationSet.empty;
+            return {
+              decorations: DecorationSet.create(tr.doc, decorations),
+            };
+          },
         },
-        /**
-         * Handle click on a thread mark and mark it as selected
-         */
-        handleClick: (view, pos, event) => {
-          if (event.button !== 0) {
-            return;
-          }
+        props: {
+          decorations(state) {
+            return (
+              PLUGIN_KEY.getState(state)?.decorations ?? DecorationSet.empty
+            );
+          },
+          /**
+           * Handle click on a thread mark and mark it as selected
+           */
+          handleClick: (view, pos, event) => {
+            if (event.button !== 0) {
+              return;
+            }
 
-          const node = view.state.doc.nodeAt(pos);
+            const node = view.state.doc.nodeAt(pos);
 
-          if (!node) {
-            self.selectThread(undefined);
-            return;
-          }
+            if (!node) {
+              self.selectThread(undefined);
+              return;
+            }
 
-          const commentMark = node.marks.find(
-            (mark) => mark.type.name === markType && mark.attrs.orphan !== true
-          );
+            const commentMark = node.marks.find(
+              (mark) =>
+                mark.type.name === markType && mark.attrs.orphan !== true,
+            );
 
-          const threadId = commentMark?.attrs.threadId as string | undefined;
-          self.selectThread(threadId, false);
+            const threadId = commentMark?.attrs.threadId as string | undefined;
+            self.selectThread(threadId, false);
+          },
         },
-      },
-    });
+      }),
+    );
   }
 
   /**
@@ -246,7 +251,7 @@ export class CommentsPlugin extends EventEmitter<any> {
       pendingComment: boolean;
       selectedThreadId: string | undefined;
       threadPositions: Map<string, { from: number; to: number }>;
-    }) => void
+    }) => void,
   ) {
     return this.on("update", callback);
   }
@@ -263,7 +268,7 @@ export class CommentsPlugin extends EventEmitter<any> {
     this.editor.transact((tr) =>
       tr.setMeta(PLUGIN_KEY, {
         name: SET_SELECTED_THREAD_ID,
-      })
+      }),
     );
 
     if (threadId && scrollToThread) {

package/src/extensions/Comments/userstore/UserStore.ts

@@ -14,7 +14,7 @@ export class UserStore<U extends User> extends EventEmitter<any> {
   private loadingUsers = new Set<string>();
 
   public constructor(
-    private readonly resolveUsers: (userIds: string[]) => Promise<U[]>
+    private readonly resolveUsers: (userIds: string[]) => Promise<U[]>,
   ) {
     super();
   }
@@ -24,7 +24,7 @@ export class UserStore<U extends User> extends EventEmitter<any> {
    */
   public async loadUsers(userIds: string[]) {
     const missingUsers = userIds.filter(
-      (id) => !this.userCache.has(id) && !this.loadingUsers.has(id)
+      (id) => !this.userCache.has(id) && !this.loadingUsers.has(id),
     );
 
     if (missingUsers.length === 0) {