@blocknote/core 0.30.1 → 0.31.1

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 key() {
+    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 key() {
+    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 key() {
+    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,11 @@ function getUpdatedThreadPositions(doc: Node, markType: string) {
   return threadPositions;
 }
 
-export class CommentsPlugin extends EventEmitter<any> {
-  public readonly plugin: Plugin;
+export class CommentsPlugin extends BlockNoteExtension {
+  public static key() {
+    return "comments";
+  }
+
   public readonly userStore: UserStore<User>;
 
   /**
@@ -103,6 +106,7 @@ export class CommentsPlugin extends EventEmitter<any> {
               const trimmedTo = Math.min(
                 pos + node.nodeSize,
                 tr.doc.content.size - 1,
+                tr.doc.content.size - 1,
               );
               tr.removeMark(trimmedFrom, trimmedTo, mark);
               tr.addMark(
@@ -156,86 +160,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);
+          },
         },
-      },
-    });
+      }),
+    );
   }
 
   /**

package/src/extensions/FilePanel/FilePanelPlugin.ts

@@ -1,7 +1,9 @@
 import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
+import { ySyncPluginKey } from "y-prosemirror";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
 import type {
   BlockFromConfig,
@@ -9,8 +11,6 @@ import type {
   InlineContentSchema,
   StyleSchema,
 } from "../../schema/index.js";
-import { EventEmitter } from "../../util/EventEmitter.js";
-import { ySyncPluginKey } from "y-prosemirror";
 
 export type FilePanelState<
   I extends InlineContentSchema,
@@ -138,60 +138,65 @@ const filePanelPluginKey = new PluginKey<FilePanelState<any, any>>(
 export class FilePanelProsemirrorPlugin<
   I extends InlineContentSchema,
   S extends StyleSchema,
-> extends EventEmitter<any> {
+> extends BlockNoteExtension {
+  public static key() {
+    return "filePanel";
+  }
+
   private view: FilePanelView<I, S> | undefined;
-  public readonly plugin: Plugin;
 
   constructor(editor: BlockNoteEditor<Record<string, FileBlockConfig>, I, S>) {
     super();
-    this.plugin = new Plugin<{
-      block: BlockFromConfig<FileBlockConfig, I, S> | undefined;
-    }>({
-      key: filePanelPluginKey,
-      view: (editorView) => {
-        this.view = new FilePanelView<I, S>(
-          editor,
-          filePanelPluginKey,
-          editorView,
-          (state) => {
-            this.emit("update", state);
-          },
-        );
-        return this.view;
-      },
-      props: {
-        handleKeyDown: (_view, event: KeyboardEvent) => {
-          if (event.key === "Escape" && this.shown) {
-            this.view?.closeMenu();
-            return true;
-          }
-          return false;
+    this.addProsemirrorPlugin(
+      new Plugin<{
+        block: BlockFromConfig<FileBlockConfig, I, S> | undefined;
+      }>({
+        key: filePanelPluginKey,
+        view: (editorView) => {
+          this.view = new FilePanelView<I, S>(
+            editor,
+            filePanelPluginKey,
+            editorView,
+            (state) => {
+              this.emit("update", state);
+            },
+          );
+          return this.view;
         },
-      },
-      state: {
-        init: () => {
-          return {
-            block: undefined,
-          };
+        props: {
+          handleKeyDown: (_view, event: KeyboardEvent) => {
+            if (event.key === "Escape" && this.shown) {
+              this.view?.closeMenu();
+              return true;
+            }
+            return false;
+          },
         },
-        apply: (transaction, prev) => {
-          const state: FilePanelState<I, S> | undefined =
-            transaction.getMeta(filePanelPluginKey);
-
-          if (state) {
-            return state;
-          }
-
-          if (
-            !transaction.getMeta(ySyncPluginKey) &&
-            (transaction.selectionSet || transaction.docChanged)
-          ) {
-            return { block: undefined };
-          }
-          return prev;
+        state: {
+          init: () => {
+            return {
+              block: undefined,
+            };
+          },
+          apply: (transaction, prev) => {
+            const state: FilePanelState<I, S> | undefined =
+              transaction.getMeta(filePanelPluginKey);
+
+            if (state) {
+              return state;
+            }
+
+            if (
+              !transaction.getMeta(ySyncPluginKey) &&
+              (transaction.selectionSet || transaction.docChanged)
+            ) {
+              return { block: undefined };
+            }
+            return prev;
+          },
         },
-      },
-    });
+      }),
+    );
   }
 
   public get shown() {