@blocknote/core 0.30.1 → 0.31.1

package/src/editor/BlockNoteEditor.ts

@@ -33,12 +33,13 @@ import {
 import { insertContentAt } from "../api/blockManipulation/insertContentAt.js";
 import {
   getSelection,
+  getSelectionCutBlocks,
   setSelection,
 } from "../api/blockManipulation/selections/selection.js";
 import {
   getTextCursorPosition,
   setTextCursorPosition,
-} from "../api/blockManipulation/selections/textCursorPosition/textCursorPosition.js";
+} from "../api/blockManipulation/selections/textCursorPosition.js";
 import { createExternalHTMLExporter } from "../api/exporters/html/externalHTMLExporter.js";
 import { blocksToMarkdown } from "../api/exporters/markdown/markdownExporter.js";
 import { HTMLToBlocks } from "../api/parsers/html/parseHTML.js";
@@ -93,6 +94,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,11 +103,10 @@ 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, ySyncPluginKey } 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";
+import { docToBlocks } from "../api/nodeConversions/nodeToBlock.js";
 import {
   BlocksChanged,
   getBlocksChangedByTransaction,
@@ -113,20 +114,26 @@ 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 "../style.css";
+import type { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
+import type { ForkYDocPlugin } from "../extensions/Collaboration/ForkYDocPlugin.js";
 import { EventEmitter } from "../util/EventEmitter.js";
-import { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
+import { BlockNoteExtension } from "./BlockNoteExtension.js";
+
+import "../style.css";
 
+/**
+ * A factory function that returns a BlockNoteExtension
+ * This is useful so we can create extensions that require an editor instance
+ * in the constructor
+ */
 export type BlockNoteExtensionFactory = (
   editor: BlockNoteEditor<any, any, any>,
 ) => BlockNoteExtension;
 
-export type BlockNoteExtension =
-  | AnyExtension
-  | {
-      plugin: Plugin;
-      priority?: number;
-    };
+/**
+ * We support Tiptap extensions and BlockNoteExtension based extensions
+ */
+export type SupportedExtension = AnyExtension | BlockNoteExtension;
 
 export type BlockCache<
   BSchema extends BlockSchema = any,
@@ -369,9 +376,23 @@ export type BlockNoteEditorOptions<
   _tiptapOptions: Partial<EditorOptions>;
 
   /**
-   * (experimental) add extra prosemirror plugins or tiptap extensions to the editor
+   * (experimental) add extra extensions to the editor
+   *
+   * @deprecated, should use `extensions` instead
+   */
+  _extensions: Record<
+    string,
+    | { plugin: Plugin; priority?: number }
+    | ((editor: BlockNoteEditor<any, any, any>) => {
+        plugin: Plugin;
+        priority?: number;
+      })
+  >;
+
+  /**
+   * Register
    */
-  _extensions: Record<string, BlockNoteExtension | BlockNoteExtensionFactory>;
+  extensions: Array<BlockNoteExtension | BlockNoteExtensionFactory>;
 
   /**
    * Boolean indicating whether the editor is in headless mode.
@@ -404,7 +425,7 @@ export class BlockNoteEditor<
   /**
    * extensions that are added to the editor, can be tiptap extensions or prosemirror plugins
    */
-  public readonly extensions: Record<string, BlockNoteExtension> = {};
+  public extensions: Record<string, SupportedExtension> = {};
 
   /**
    * Boolean indicating whether the editor is in headless mode.
@@ -473,8 +494,10 @@ export class BlockNoteEditor<
 
   private readonly showSelectionPlugin: ShowSelectionPlugin;
 
-  private readonly cursorPlugin: CursorPlugin;
-
+  /**
+   * The plugin for forking a document, only defined if in collaboration mode
+   */
+  public readonly forkYDocPlugin?: ForkYDocPlugin;
   /**
    * The `uploadFile` method is what the editor uses when files need to be uploaded (for example when selecting an image to upload).
    * This method should set when creating the editor as this is application-specific.
@@ -609,12 +632,49 @@ export class BlockNoteEditor<
     });
 
     // add extensions from options
-    Object.entries(newOptions._extensions || {}).forEach(([key, ext]) => {
+    for (let ext of newOptions.extensions || []) {
       if (typeof ext === "function") {
         // factory
         ext = ext(this);
       }
+      const key = (ext.constructor as any).key();
+      if (!key) {
+        throw new Error(
+          `Extension ${ext.constructor.name} does not have a key method`,
+        );
+      }
+      if (this.extensions[key]) {
+        throw new Error(
+          `Extension ${ext.constructor.name} already exists with key ${key}`,
+        );
+      }
       this.extensions[key] = ext;
+    }
+
+    // (when passed in via the deprecated `_extensions` option)
+    Object.entries(newOptions._extensions || {}).forEach(([key, ext]) => {
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const editor = this;
+
+      const instance = typeof ext === "function" ? ext(editor) : ext;
+      if (!("plugin" in instance)) {
+        // Assume it is an Extension/Mark/Node
+        this.extensions[key] = instance;
+        return;
+      }
+
+      this.extensions[key] = new (class extends BlockNoteExtension {
+        public static key() {
+          return key;
+        }
+        constructor() {
+          super();
+          this.addProsemirrorPlugin(instance.plugin);
+        }
+        public get priority() {
+          return instance.priority;
+        }
+      })();
     });
 
     this.formattingToolbar = this.extensions["formattingToolbar"] as any;
@@ -625,7 +685,7 @@ export class BlockNoteEditor<
     this.tableHandles = this.extensions["tableHandles"] as any;
     this.comments = this.extensions["comments"] as any;
     this.showSelectionPlugin = this.extensions["showSelection"] as any;
-    this.cursorPlugin = this.extensions["yCursorPlugin"] as any;
+    this.forkYDocPlugin = this.extensions["forkYDocPlugin"] as any;
 
     if (newOptions.uploadFile) {
       const uploadFile = newOptions.uploadFile;
@@ -691,20 +751,19 @@ export class BlockNoteEditor<
           return ext;
         }
 
-        if (!ext.plugin) {
-          throw new Error(
-            "Extension should either be a TipTap extension or a ProseMirror plugin in a plugin property",
-          );
+        if (ext instanceof BlockNoteExtension && !ext.plugins.length) {
+          return undefined;
         }
 
         // "blocknote" extensions (prosemirror plugins)
         return Extension.create({
           name: key,
           priority: ext.priority,
-          addProseMirrorPlugins: () => [ext.plugin],
+          addProseMirrorPlugins: () => ext.plugins,
         });
       }),
-    ];
+    ].filter((ext): ext is Extension => ext !== undefined);
+
     const tiptapOptions: BlockNoteTipTapEditorOptions = {
       ...blockNoteTipTapOptions,
       ...newOptions._tiptapOptions,
@@ -865,6 +924,26 @@ export class BlockNoteEditor<
     }
   }
 
+  // TO DISCUSS
+  /**
+   * Shorthand to get a typed extension from the editor, by
+   * just passing in the extension class.
+   *
+   * @param ext - The extension class to get
+   * @param key - optional, the key of the extension in the extensions object (defaults to the extension name)
+   * @returns The extension instance
+   */
+  public extension<T extends BlockNoteExtension>(
+    ext: { new (...args: any[]): T } & typeof BlockNoteExtension,
+    key = ext.key(),
+  ): T {
+    const extension = this.extensions[key] as T;
+    if (!extension) {
+      throw new Error(`Extension ${key} not found`);
+    }
+    return extension;
+  }
+
   /**
    * Mount the editor to a parent DOM element. Call mount(undefined) to clean up
    *
@@ -946,15 +1025,7 @@ export class BlockNoteEditor<
    */
   public get document(): Block<BSchema, ISchema, SSchema>[] {
     return this.transact((tr) => {
-      const blocks: Block<BSchema, ISchema, SSchema>[] = [];
-
-      tr.doc.firstChild!.descendants((node) => {
-        blocks.push(nodeToBlock(node, this.pmSchema));
-
-        return false;
-      });
-
-      return blocks;
+      return docToBlocks(tr.doc, this.pmSchema);
     });
   }
 
@@ -1099,12 +1170,26 @@ export class BlockNoteEditor<
   }
 
   /**
-   * Gets a snapshot of the current selection.
+   * Gets a snapshot of the current selection. This contains all blocks (included nested blocks)
+   * that the selection spans across.
+   *
+   * If the selection starts / ends halfway through a block, the returned data will contain the entire block.
    */
   public getSelection(): Selection<BSchema, ISchema, SSchema> | undefined {
     return this.transact((tr) => getSelection(tr));
   }
 
+  /**
+   * Gets a snapshot of the current selection. This contains all blocks (included nested blocks)
+   * that the selection spans across.
+   *
+   * If the selection starts / ends halfway through a block, the returned block will be
+   * only the part of the block that is included in the selection.
+   */
+  public getSelectionCutBlocks() {
+    return this.transact((tr) => getSelectionCutBlocks(tr));
+  }
+
   /**
    * Sets the selection to a range of blocks.
    * @param startBlock The identifier of the block that should be the start of the selection.
@@ -1500,7 +1585,7 @@ export class BlockNoteEditor<
       );
     }
 
-    this.cursorPlugin.updateUser(user);
+    (this.extensions["yCursorPlugin"] as CursorPlugin).updateUser(user);
   }
 
   /**
@@ -1595,8 +1680,8 @@ export class BlockNoteEditor<
     if (!this.prosemirrorView) {
       return undefined;
     }
-    const state = this.prosemirrorView?.state;
-    const { selection } = state;
+
+    const { selection } = this.prosemirrorState;
 
     // support for CellSelections
     const { ranges } = selection;
@@ -1641,7 +1726,7 @@ export class BlockNoteEditor<
       if (pluginState?.deleteTriggerCharacter) {
         tr.insertText(triggerCharacter);
       }
-      tr.scrollIntoView().setMeta(this.suggestionMenus.plugin, {
+      tr.scrollIntoView().setMeta(this.suggestionMenus.plugins[0], {
         triggerCharacter: triggerCharacter,
         deleteTriggerCharacter: pluginState?.deleteTriggerCharacter || false,
         ignoreQueryLength: pluginState?.ignoreQueryLength || false,

package/src/editor/BlockNoteExtension.ts

@@ -0,0 +1,26 @@
+import { Plugin } from "prosemirror-state";
+import { EventEmitter } from "../util/EventEmitter.js";
+
+export abstract class BlockNoteExtension<
+  TEvent extends Record<string, any> = any,
+> extends EventEmitter<TEvent> {
+  public static key(): string {
+    throw new Error("You must implement the key method in your extension");
+  }
+
+  protected addProsemirrorPlugin(plugin: Plugin) {
+    this.plugins.push(plugin);
+  }
+
+  public readonly plugins: Plugin[] = [];
+  public get priority(): number | undefined {
+    return undefined;
+  }
+
+  // eslint-disable-next-line
+  constructor(..._args: any[]) {
+    super();
+    // Allow subclasses to have constructors with parameters
+    // without this, we can't easily implement BlockNoteEditor.extension(MyExtension) pattern
+  }
+}

package/src/editor/BlockNoteExtensions.ts

@@ -9,13 +9,13 @@ import * as Y from "yjs";
 import { createDropFileExtension } from "../api/clipboard/fromClipboard/fileDropExtension.js";
 import { createPasteFromClipboardExtension } from "../api/clipboard/fromClipboard/pasteExtension.js";
 import { createCopyToClipboardExtension } from "../api/clipboard/toClipboard/copyExtension.js";
+import type { ThreadStore } from "../comments/index.js";
 import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension.js";
 import { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
-import { UndoPlugin } from "../extensions/Collaboration/UndoPlugin.js";
 import { SyncPlugin } from "../extensions/Collaboration/SyncPlugin.js";
+import { UndoPlugin } from "../extensions/Collaboration/UndoPlugin.js";
 import { CommentMark } from "../extensions/Comments/CommentMark.js";
 import { CommentsPlugin } from "../extensions/Comments/CommentsPlugin.js";
-import type { ThreadStore } from "../comments/index.js";
 import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlugin.js";
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin.js";
 import { HardBreak } from "../extensions/HardBreak/HardBreak.js";
@@ -31,6 +31,11 @@ import { PreviousBlockTypePlugin } from "../extensions/PreviousBlockType/Previou
 import { ShowSelectionPlugin } from "../extensions/ShowSelection/ShowSelectionPlugin.js";
 import { SideMenuProsemirrorPlugin } from "../extensions/SideMenu/SideMenuPlugin.js";
 import { SuggestionMenuProseMirrorPlugin } from "../extensions/SuggestionMenu/SuggestionPlugin.js";
+import {
+  SuggestionAddMark,
+  SuggestionDeleteMark,
+  SuggestionModificationMark,
+} from "../extensions/Suggestions/SuggestionMarks.js";
 import { TableHandlesProsemirrorPlugin } from "../extensions/TableHandles/TableHandlesPlugin.js";
 import { TextAlignmentExtension } from "../extensions/TextAlignment/TextAlignmentExtension.js";
 import { TextColorExtension } from "../extensions/TextColor/TextColorExtension.js";
@@ -49,8 +54,9 @@ import {
 import type {
   BlockNoteEditor,
   BlockNoteEditorOptions,
-  BlockNoteExtension,
+  SupportedExtension,
 } from "./BlockNoteEditor.js";
+import { ForkYDocPlugin } from "../extensions/Collaboration/ForkYDocPlugin.js";
 
 type ExtensionOptions<
   BSchema extends BlockSchema,
@@ -101,7 +107,7 @@ export const getBlockNoteExtensions = <
 >(
   opts: ExtensionOptions<BSchema, I, S>,
 ) => {
-  const ret: Record<string, BlockNoteExtension> = {};
+  const ret: Record<string, SupportedExtension> = {};
   const tiptapExtensions = getTipTapExtensions(opts);
 
   for (const ext of tiptapExtensions) {
@@ -115,6 +121,10 @@ export const getBlockNoteExtensions = <
     if (opts.collaboration.provider?.awareness) {
       ret["yCursorPlugin"] = new CursorPlugin(opts.collaboration);
     }
+    ret["forkYDocPlugin"] = new ForkYDocPlugin({
+      editor: opts.editor,
+      collaboration: opts.collaboration,
+    });
   }
 
   // Note: this is pretty hardcoded and will break when user provides plugins with same keys.
@@ -139,14 +149,6 @@ export const getBlockNoteExtensions = <
     ret["tableHandles"] = new TableHandlesProsemirrorPlugin(opts.editor as any);
   }
 
-  ret["dropCursor"] = {
-    plugin: opts.dropCursor({
-      width: 5,
-      color: "#ddeeff",
-      editor: opts.editor,
-    }),
-  };
-
   ret["nodeSelectionKeyboard"] = new NodeSelectionKeyboardPlugin();
 
   ret["showSelection"] = new ShowSelectionPlugin(opts.editor);
@@ -190,6 +192,17 @@ const getTipTapExtensions = <
     Gapcursor,
 
     // DropCursor,
+    Extension.create({
+      name: "dropCursor",
+      addProseMirrorPlugins: () => [
+        opts.dropCursor({
+          width: 5,
+          color: "#ddeeff",
+          editor: opts.editor,
+        }),
+      ],
+    }),
+
     UniqueID.configure({
       // everything from bnBlock group (nodes that represent a BlockNote block should have an id)
       types: ["blockContainer", "columnList", "column"],
@@ -202,6 +215,9 @@ const getTipTapExtensions = <
     Text,
 
     // marks:
+    SuggestionAddMark,
+    SuggestionDeleteMark,
+    SuggestionModificationMark,
     Link.extend({
       inclusive: false,
     }).configure({

package/src/editor/BlockNoteTipTapEditor.ts

@@ -1,5 +1,9 @@
-import { Editor, EditorOptions, createDocument } from "@tiptap/core";
-import { Editor as TiptapEditor } from "@tiptap/core";
+import {
+  Editor,
+  EditorOptions,
+  Editor as TiptapEditor,
+  createDocument,
+} from "@tiptap/core";
 
 import { Node } from "@tiptap/pm/model";
 
@@ -141,6 +145,10 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
     if (!this.view) {
       // before view has been initialized
       this._state = this.state.apply(transaction);
+      this.emit("transaction", {
+        editor: this,
+        transaction,
+      });
       return;
     }
     // This is a verbatim copy of the default dispatch method, but with the following changes:
@@ -216,6 +224,19 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
     });
   }
 
+  // a helper method that can enable plugins before the view has been initialized
+  // currently only used for testing
+  forceEnablePlugins() {
+    if (this.view) {
+      throw new Error(
+        "forcePluginsEnabled called after view has been initialized",
+      );
+    }
+    this._state = this.state.reconfigure({
+      plugins: this.extensionManager.plugins,
+    });
+  }
+
   /**
    * Replace the default `createView` method with a custom one - which we call on mount
    */

package/src/extensions/Collaboration/CursorPlugin.ts

@@ -1,7 +1,7 @@
-import { Plugin } from "prosemirror-state";
 import { defaultSelectionBuilder, yCursorPlugin } from "y-prosemirror";
 import { Awareness } from "y-protocols/awareness.js";
 import * as Y from "yjs";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 
 export type CollaborationUser = {
   name: string;
@@ -9,8 +9,11 @@ export type CollaborationUser = {
   [key: string]: string;
 };
 
-export class CursorPlugin {
-  public plugin: Plugin;
+export class CursorPlugin extends BlockNoteExtension {
+  public static key() {
+    return "yCursorPlugin";
+  }
+
   private provider: { awareness: Awareness };
   private recentlyUpdatedCursors: Map<
     number,
@@ -25,6 +28,7 @@ export class CursorPlugin {
       showCursorLabels?: "always" | "activity";
     },
   ) {
+    super();
     this.provider = collaboration.provider;
     this.recentlyUpdatedCursors = new Map();
 
@@ -62,10 +66,12 @@ export class CursorPlugin {
       );
     }
 
-    this.plugin = yCursorPlugin(this.provider.awareness, {
-      selectionBuilder: defaultSelectionBuilder,
-      cursorBuilder: this.renderCursor,
-    });
+    this.addProsemirrorPlugin(
+      yCursorPlugin(this.provider.awareness, {
+        selectionBuilder: defaultSelectionBuilder,
+        cursorBuilder: this.renderCursor,
+      }),
+    );
   }
 
   public get priority() {

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",
+  );
+});