@blocknote/core 0.29.1 → 0.30.0

package/src/editor/BlockNoteEditor.ts

@@ -101,7 +101,8 @@ import {
 } from "@tiptap/pm/state";
 import { dropCursor } from "prosemirror-dropcursor";
 import { EditorView } from "prosemirror-view";
-import { ySyncPluginKey } from "y-prosemirror";
+import { undoCommand, redoCommand, ySyncPluginKey } from "y-prosemirror";
+import { undo, redo } from "@tiptap/pm/history";
 import { createInternalHTMLSerializer } from "../api/exporters/html/internalHTMLSerializer.js";
 import { inlineContentToNodes } from "../api/nodeConversions/blockToNode.js";
 import { nodeToBlock } from "../api/nodeConversions/nodeToBlock.js";
@@ -114,27 +115,29 @@ import { CodeBlockOptions } from "../blocks/CodeBlockContent/CodeBlockContent.js
 import type { ThreadStore, User } from "../comments/index.js";
 import "../style.css";
 import { EventEmitter } from "../util/EventEmitter.js";
+import { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
 
 export type BlockNoteExtensionFactory = (
-  editor: BlockNoteEditor<any, any, any>
+  editor: BlockNoteEditor<any, any, any>,
 ) => BlockNoteExtension;
 
 export type BlockNoteExtension =
   | AnyExtension
   | {
       plugin: Plugin;
+      priority?: number;
     };
 
 export type BlockCache<
   BSchema extends BlockSchema = any,
   ISchema extends InlineContentSchema = any,
-  SSchema extends StyleSchema = any
+  SSchema extends StyleSchema = any,
 > = WeakMap<Node, Block<BSchema, ISchema, SSchema>>;
 
 export type BlockNoteEditorOptions<
   BSchema extends BlockSchema,
   ISchema extends InlineContentSchema,
-  SSchema extends StyleSchema
+  SSchema extends StyleSchema,
 > = {
   /**
    * Whether changes to blocks (like indentation, creating lists, changing headings) should be animated or not. Defaults to `true`.
@@ -357,7 +360,7 @@ export type BlockNoteEditorOptions<
    */
   uploadFile: (
     file: File,
-    blockId?: string
+    blockId?: string,
   ) => Promise<string | Record<string, any>>;
 
   /**
@@ -389,7 +392,7 @@ const blockNoteTipTapOptions = {
 export class BlockNoteEditor<
   BSchema extends BlockSchema = DefaultBlockSchema,
   ISchema extends InlineContentSchema = DefaultInlineContentSchema,
-  SSchema extends StyleSchema = DefaultStyleSchema
+  SSchema extends StyleSchema = DefaultStyleSchema,
 > extends EventEmitter<{
   create: void;
 }> {
@@ -412,11 +415,10 @@ export class BlockNoteEditor<
    */
   public readonly headless: boolean = false;
 
-  public readonly _tiptapEditor:
-    | Omit<BlockNoteTipTapEditor, "view"> & {
-        view: EditorView | undefined;
-        contentComponent: any;
-      } = undefined as any; // TODO: Type should actually reflect that it can be `undefined` in headless mode
+  public readonly _tiptapEditor: Omit<BlockNoteTipTapEditor, "view"> & {
+    view: EditorView | undefined;
+    contentComponent: any;
+  } = undefined as any; // TODO: Type should actually reflect that it can be `undefined` in headless mode
 
   /**
    * Used by React to store a reference to an `ElementRenderer` helper utility to make sure we can render React elements
@@ -471,6 +473,8 @@ export class BlockNoteEditor<
 
   private readonly showSelectionPlugin: ShowSelectionPlugin;
 
+  private readonly cursorPlugin: CursorPlugin;
+
   /**
    * 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.
@@ -505,37 +509,37 @@ export class BlockNoteEditor<
   public static create<
     BSchema extends BlockSchema = DefaultBlockSchema,
     ISchema extends InlineContentSchema = DefaultInlineContentSchema,
-    SSchema extends StyleSchema = DefaultStyleSchema
+    SSchema extends StyleSchema = DefaultStyleSchema,
   >(options: Partial<BlockNoteEditorOptions<BSchema, ISchema, SSchema>> = {}) {
     return new BlockNoteEditor<BSchema, ISchema, SSchema>(options);
   }
 
   protected constructor(
-    protected readonly options: Partial<BlockNoteEditorOptions<any, any, any>>
+    protected readonly options: Partial<BlockNoteEditorOptions<any, any, any>>,
   ) {
     super();
     const anyOpts = options as any;
     if (anyOpts.onEditorContentChange) {
       throw new Error(
-        "onEditorContentChange initialization option is deprecated, use <BlockNoteView onChange={...} />, the useEditorChange(...) hook, or editor.onChange(...)"
+        "onEditorContentChange initialization option is deprecated, use <BlockNoteView onChange={...} />, the useEditorChange(...) hook, or editor.onChange(...)",
       );
     }
 
     if (anyOpts.onTextCursorPositionChange) {
       throw new Error(
-        "onTextCursorPositionChange initialization option is deprecated, use <BlockNoteView onSelectionChange={...} />, the useEditorSelectionChange(...) hook, or editor.onSelectionChange(...)"
+        "onTextCursorPositionChange initialization option is deprecated, use <BlockNoteView onSelectionChange={...} />, the useEditorSelectionChange(...) hook, or editor.onSelectionChange(...)",
       );
     }
 
     if (anyOpts.onEditorReady) {
       throw new Error(
-        "onEditorReady is deprecated. Editor is immediately ready for use after creation."
+        "onEditorReady is deprecated. Editor is immediately ready for use after creation.",
       );
     }
 
     if (anyOpts.editable) {
       throw new Error(
-        "editable initialization option is deprecated, use <BlockNoteView editable={true/false} />, or alternatively editor.isEditable = true/false"
+        "editable initialization option is deprecated, use <BlockNoteView editable={true/false} />, or alternatively editor.isEditable = true/false",
       );
     }
 
@@ -621,18 +625,19 @@ 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;
 
     if (newOptions.uploadFile) {
       const uploadFile = newOptions.uploadFile;
-      this.uploadFile = async (file, block) => {
+      this.uploadFile = async (file, blockId) => {
         this.onUploadStartCallbacks.forEach((callback) =>
-          callback.apply(this, [block])
+          callback.apply(this, [blockId]),
         );
         try {
-          return await uploadFile(file, block);
+          return await uploadFile(file, blockId);
         } finally {
           this.onUploadEndCallbacks.forEach((callback) =>
-            callback.apply(this, [block])
+            callback.apply(this, [blockId]),
           );
         }
       };
@@ -642,13 +647,13 @@ export class BlockNoteEditor<
     this.headless = newOptions._headless;
 
     const collaborationEnabled =
-      "collaboration" in this.extensions ||
+      "ySyncPlugin" in this.extensions ||
       "liveblocksExtension" in this.extensions;
 
     if (collaborationEnabled && newOptions.initialContent) {
       // eslint-disable-next-line no-console
       console.warn(
-        "When using Collaboration, initialContent might cause conflicts, because changes should come from the collaboration provider"
+        "When using Collaboration, initialContent might cause conflicts, because changes should come from the collaboration provider",
       );
     }
 
@@ -671,7 +676,7 @@ export class BlockNoteEditor<
     if (!Array.isArray(initialContent) || initialContent.length === 0) {
       throw new Error(
         "initialContent must be a non-empty array of blocks, received: " +
-          initialContent
+          initialContent,
       );
     }
 
@@ -688,13 +693,14 @@ export class BlockNoteEditor<
 
         if (!ext.plugin) {
           throw new Error(
-            "Extension should either be a TipTap extension or a ProseMirror plugin in a plugin property"
+            "Extension should either be a TipTap extension or a ProseMirror plugin in a plugin property",
           );
         }
 
         // "blocknote" extensions (prosemirror plugins)
         return Extension.create({
           name: key,
+          priority: ext.priority,
           addProseMirrorPlugins: () => [ext.plugin],
         });
       }),
@@ -716,7 +722,7 @@ export class BlockNoteEditor<
           class: mergeCSSClasses(
             "bn-editor",
             newOptions.defaultStyles ? "bn-default-styles" : "",
-            newOptions.domAttributes?.editor?.class || ""
+            newOptions.domAttributes?.editor?.class || "",
           ),
         },
         transformPasted,
@@ -726,7 +732,7 @@ export class BlockNoteEditor<
     if (!this.headless) {
       this._tiptapEditor = BlockNoteTipTapEditor.create(
         tiptapOptions,
-        this.schema.styleSchema
+        this.schema.styleSchema,
       ) as BlockNoteTipTapEditor & {
         view: any;
         contentComponent: any;
@@ -761,7 +767,7 @@ export class BlockNoteEditor<
   public exec(command: Command) {
     if (this.activeTransaction) {
       throw new Error(
-        "`exec` should not be called within a `transact` call, move the `exec` call outside of the `transact` call"
+        "`exec` should not be called within a `transact` call, move the `exec` call outside of the `transact` call",
       );
     }
     const state = this._tiptapEditor.state;
@@ -786,7 +792,7 @@ export class BlockNoteEditor<
   public canExec(command: Command): boolean {
     if (this.activeTransaction) {
       throw new Error(
-        "`canExec` should not be called within a `transact` call, move the `canExec` call outside of the `transact` call"
+        "`canExec` should not be called within a `transact` call, move the `canExec` call outside of the `transact` call",
       );
     }
     const state = this._tiptapEditor.state;
@@ -820,8 +826,8 @@ export class BlockNoteEditor<
        * The current active transaction, this will automatically be dispatched to the editor when the callback is complete
        * If another `transact` call is made within the callback, it will be passed the same transaction as the parent call.
        */
-      tr: Transaction
-    ) => T
+      tr: Transaction,
+    ) => T,
   ): T {
     if (this.activeTransaction) {
       // Already in a transaction, so we can just callback immediately
@@ -866,13 +872,28 @@ export class BlockNoteEditor<
    */
   public mount = (
     parentElement?: HTMLElement | null,
-    contentComponent?: any
+    contentComponent?: any,
   ) => {
     this._tiptapEditor.mount(this, parentElement, contentComponent);
   };
 
+  /**
+   * Get the underlying prosemirror state
+   * @note Prefer using `editor.transact` to read the current editor state, as that will ensure the state is up to date
+   * @see https://prosemirror.net/docs/ref/#state.EditorState
+   */
+  public get prosemirrorState() {
+    if (this.activeTransaction) {
+      throw new Error(
+        "`prosemirrorState` should not be called within a `transact` call, move the `prosemirrorState` call outside of the `transact` call or use `editor.transact` to read the current editor state",
+      );
+    }
+    return this._tiptapEditor.state;
+  }
+
   /**
    * Get the underlying prosemirror view
+   * @see https://prosemirror.net/docs/ref/#view.EditorView
    */
   public get prosemirrorView() {
     return this._tiptapEditor.view;
@@ -945,7 +966,7 @@ export class BlockNoteEditor<
    * matching block was found.
    */
   public getBlock(
-    blockIdentifier: BlockIdentifier
+    blockIdentifier: BlockIdentifier,
   ): Block<BSchema, ISchema, SSchema> | undefined {
     return this.transact((tr) => getBlock(tr.doc, blockIdentifier));
   }
@@ -960,7 +981,7 @@ export class BlockNoteEditor<
    * in the document.
    */
   public getPrevBlock(
-    blockIdentifier: BlockIdentifier
+    blockIdentifier: BlockIdentifier,
   ): Block<BSchema, ISchema, SSchema> | undefined {
     return this.transact((tr) => getPrevBlock(tr.doc, blockIdentifier));
   }
@@ -974,7 +995,7 @@ export class BlockNoteEditor<
    * the document.
    */
   public getNextBlock(
-    blockIdentifier: BlockIdentifier
+    blockIdentifier: BlockIdentifier,
   ): Block<BSchema, ISchema, SSchema> | undefined {
     return this.transact((tr) => getNextBlock(tr.doc, blockIdentifier));
   }
@@ -987,7 +1008,7 @@ export class BlockNoteEditor<
    * if no matching block was found, or the block isn't nested.
    */
   public getParentBlock(
-    blockIdentifier: BlockIdentifier
+    blockIdentifier: BlockIdentifier,
   ): Block<BSchema, ISchema, SSchema> | undefined {
     return this.transact((tr) => getParentBlock(tr.doc, blockIdentifier));
   }
@@ -999,7 +1020,7 @@ export class BlockNoteEditor<
    */
   public forEachBlock(
     callback: (block: Block<BSchema, ISchema, SSchema>) => boolean,
-    reverse = false
+    reverse = false,
   ): void {
     const blocks = this.document.slice();
 
@@ -1008,7 +1029,7 @@ export class BlockNoteEditor<
     }
 
     function traverseBlockArray(
-      blockArray: Block<BSchema, ISchema, SSchema>[]
+      blockArray: Block<BSchema, ISchema, SSchema>[],
     ): boolean {
       for (const block of blockArray) {
         if (callback(block) === false) {
@@ -1034,7 +1055,7 @@ export class BlockNoteEditor<
    * Executes a callback whenever the editor's contents change.
    * @param callback The callback to execute.
    *
-   * @deprecated use `onChange` instead
+   * @deprecated use {@link BlockNoteEditor.onChange} instead
    */
   public onEditorContentChange(callback: () => void) {
     this._tiptapEditor.on("update", callback);
@@ -1070,10 +1091,10 @@ export class BlockNoteEditor<
    */
   public setTextCursorPosition(
     targetBlock: BlockIdentifier,
-    placement: "start" | "end" = "start"
+    placement: "start" | "end" = "start",
   ) {
     return this.transact((tr) =>
-      setTextCursorPosition(tr, targetBlock, placement)
+      setTextCursorPosition(tr, targetBlock, placement),
     );
   }
 
@@ -1137,10 +1158,10 @@ export class BlockNoteEditor<
   public insertBlocks(
     blocksToInsert: PartialBlock<BSchema, ISchema, SSchema>[],
     referenceBlock: BlockIdentifier,
-    placement: "before" | "after" = "before"
+    placement: "before" | "after" = "before",
   ) {
     return this.transact((tr) =>
-      insertBlocks(tr, blocksToInsert, referenceBlock, placement)
+      insertBlocks(tr, blocksToInsert, referenceBlock, placement),
     );
   }
 
@@ -1153,7 +1174,7 @@ export class BlockNoteEditor<
    */
   public updateBlock(
     blockToUpdate: BlockIdentifier,
-    update: PartialBlock<BSchema, ISchema, SSchema>
+    update: PartialBlock<BSchema, ISchema, SSchema>,
   ) {
     return this.transact((tr) => updateBlock(tr, blockToUpdate, update));
   }
@@ -1164,7 +1185,7 @@ export class BlockNoteEditor<
    */
   public removeBlocks(blocksToRemove: BlockIdentifier[]) {
     return this.transact(
-      (tr) => removeAndInsertBlocks(tr, blocksToRemove, []).removedBlocks
+      (tr) => removeAndInsertBlocks(tr, blocksToRemove, []).removedBlocks,
     );
   }
 
@@ -1177,13 +1198,34 @@ export class BlockNoteEditor<
    */
   public replaceBlocks(
     blocksToRemove: BlockIdentifier[],
-    blocksToInsert: PartialBlock<BSchema, ISchema, SSchema>[]
+    blocksToInsert: PartialBlock<BSchema, ISchema, SSchema>[],
   ) {
     return this.transact((tr) =>
-      removeAndInsertBlocks(tr, blocksToRemove, blocksToInsert)
+      removeAndInsertBlocks(tr, blocksToRemove, blocksToInsert),
     );
   }
 
+  /**
+   * Undo the last action.
+   */
+  public undo() {
+    if (this.options.collaboration) {
+      return this.exec(undoCommand);
+    }
+
+    return this.exec(undo);
+  }
+
+  /**
+   * Redo the last action.
+   */
+  public redo() {
+    if (this.options.collaboration) {
+      return this.exec(redoCommand);
+    }
+    return this.exec(redo);
+  }
+
   /**
    * Insert a piece of content at the current cursor position.
    *
@@ -1199,7 +1241,7 @@ export class BlockNoteEditor<
           from: tr.selection.from,
           to: tr.selection.to,
         },
-        nodes
+        nodes,
       );
     });
   }
@@ -1323,7 +1365,7 @@ export class BlockNoteEditor<
         tr.setSelection(TextSelection.create(tr.doc, to)).addMark(
           from,
           to,
-          mark
+          mark,
         );
       }
     });
@@ -1383,7 +1425,7 @@ export class BlockNoteEditor<
    * @returns The blocks, serialized as an HTML string.
    */
   public async blocksToHTMLLossy(
-    blocks: PartialBlock<BSchema, ISchema, SSchema>[] = this.document
+    blocks: PartialBlock<BSchema, ISchema, SSchema>[] = this.document,
   ): Promise<string> {
     const exporter = createExternalHTMLExporter(this.pmSchema, this);
     return exporter.exportBlocks(blocks, {});
@@ -1399,7 +1441,7 @@ export class BlockNoteEditor<
    * @returns The blocks, serialized as an HTML string.
    */
   public async blocksToFullHTML(
-    blocks: PartialBlock<BSchema, ISchema, SSchema>[]
+    blocks: PartialBlock<BSchema, ISchema, SSchema>[],
   ): Promise<string> {
     const exporter = createInternalHTMLSerializer(this.pmSchema, this);
     return exporter.serializeBlocks(blocks, {});
@@ -1412,7 +1454,7 @@ export class BlockNoteEditor<
    * @returns The blocks parsed from the HTML string.
    */
   public async tryParseHTMLToBlocks(
-    html: string
+    html: string,
   ): Promise<Block<BSchema, ISchema, SSchema>[]> {
     return HTMLToBlocks(html, this.pmSchema);
   }
@@ -1424,7 +1466,7 @@ export class BlockNoteEditor<
    * @returns The blocks, serialized as a Markdown string.
    */
   public async blocksToMarkdownLossy(
-    blocks: PartialBlock<BSchema, ISchema, SSchema>[] = this.document
+    blocks: PartialBlock<BSchema, ISchema, SSchema>[] = this.document,
   ): Promise<string> {
     return blocksToMarkdown(blocks, this.pmSchema, this, {});
   }
@@ -1437,7 +1479,7 @@ export class BlockNoteEditor<
    * @returns The blocks parsed from the Markdown string.
    */
   public async tryParseMarkdownToBlocks(
-    markdown: string
+    markdown: string,
   ): Promise<Block<BSchema, ISchema, SSchema>[]> {
     return markdownToBlocks(markdown, this.pmSchema);
   }
@@ -1448,10 +1490,11 @@ export class BlockNoteEditor<
   public updateCollaborationUserInfo(user: { name: string; color: string }) {
     if (!this.options.collaboration) {
       throw new Error(
-        "Cannot update collaboration user info when collaboration is disabled."
+        "Cannot update collaboration user info when collaboration is disabled.",
       );
     }
-    this._tiptapEditor.commands.updateUser(user);
+
+    this.cursorPlugin.updateUser(user);
   }
 
   /**
@@ -1468,8 +1511,8 @@ export class BlockNoteEditor<
          * Returns the blocks that were inserted, updated, or deleted by the change that occurred.
          */
         getChanges(): BlocksChanged<BSchema, ISchema, SSchema>;
-      }
-    ) => void
+      },
+    ) => void,
   ) {
     if (this.headless) {
       // Note: would be nice if this is possible in headless mode as well
@@ -1504,7 +1547,7 @@ export class BlockNoteEditor<
    */
   public onSelectionChange(
     callback: (editor: BlockNoteEditor<BSchema, ISchema, SSchema>) => void,
-    includeSelectionChangedByRemote?: boolean
+    includeSelectionChangedByRemote?: boolean,
   ) {
     if (this.headless) {
       return;
@@ -1581,7 +1624,7 @@ export class BlockNoteEditor<
     pluginState?: {
       deleteTriggerCharacter?: boolean;
       ignoreQueryLength?: boolean;
-    }
+    },
   ) {
     if (!this.prosemirrorView) {
       return;

package/src/editor/BlockNoteExtensions.ts

@@ -10,7 +10,9 @@ import { createDropFileExtension } from "../api/clipboard/fromClipboard/fileDrop
 import { createPasteFromClipboardExtension } from "../api/clipboard/fromClipboard/pasteExtension.js";
 import { createCopyToClipboardExtension } from "../api/clipboard/toClipboard/copyExtension.js";
 import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension.js";
-import { createCollaborationExtensions } from "../extensions/Collaboration/createCollaborationExtensions.js";
+import { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
+import { UndoPlugin } from "../extensions/Collaboration/UndoPlugin.js";
+import { SyncPlugin } from "../extensions/Collaboration/SyncPlugin.js";
 import { CommentMark } from "../extensions/Comments/CommentMark.js";
 import { CommentsPlugin } from "../extensions/Comments/CommentsPlugin.js";
 import type { ThreadStore } from "../comments/index.js";
@@ -106,6 +108,15 @@ export const getBlockNoteExtensions = <
     ret[ext.name] = ext;
   }
 
+  if (opts.collaboration) {
+    ret["ySyncPlugin"] = new SyncPlugin(opts.collaboration.fragment);
+    ret["yUndoPlugin"] = new UndoPlugin();
+
+    if (opts.collaboration.provider?.awareness) {
+      ret["yCursorPlugin"] = new CursorPlugin(opts.collaboration);
+    }
+  }
+
   // Note: this is pretty hardcoded and will break when user provides plugins with same keys.
   // Define name on plugins instead and not make this a map?
   ret["formattingToolbar"] = new FormattingToolbarProsemirrorPlugin(
@@ -285,10 +296,8 @@ const getTipTapExtensions = <
 
   LINKIFY_INITIALIZED = true;
 
-  if (opts.collaboration) {
-    tiptapExtensions.push(...createCollaborationExtensions(opts.collaboration));
-  } else {
-    // disable history extension when collaboration is enabled as Yjs takes care of undo / redo
+  if (!opts.collaboration) {
+    // disable history extension when collaboration is enabled as y-prosemirror takes care of undo / redo
     tiptapExtensions.push(History);
   }