@blocknote/core 0.44.2 → 0.46.0

package/src/editor/BlockNoteEditor.ts

@@ -7,8 +7,6 @@ import {
 } from "@tiptap/core";
 import { type Command, type Plugin, type Transaction } from "@tiptap/pm/state";
 import { Node, Schema } from "prosemirror-model";
-import * as Y from "yjs";
-
 import type { BlocksChanged } from "../api/getBlocksChangedByTransaction.js";
 import { blockToNode } from "../api/nodeConversions/blockToNode.js";
 import {
@@ -19,6 +17,8 @@ import {
   DefaultStyleSchema,
   PartialBlock,
 } from "../blocks/index.js";
+import type { CollaborationOptions } from "../extensions/Collaboration/Collaboration.js";
+import { BlockChangeExtension } from "../extensions/index.js";
 import { UniqueID } from "../extensions/tiptap-extensions/UniqueID/UniqueID.js";
 import type { Dictionary } from "../i18n/dictionary.js";
 import { en } from "../i18n/locales/index.js";
@@ -52,7 +52,6 @@ import {
 } from "./managers/index.js";
 import type { Selection } from "./selectionTypes.js";
 import { transformPasted } from "./transformPasted.js";
-import { BlockChangeExtension } from "../extensions/index.js";
 
 export type BlockCache<
   BSchema extends BlockSchema = any,
@@ -82,37 +81,8 @@ export interface BlockNoteEditorOptions<
   /**
    * When enabled, allows for collaboration between multiple users.
    * See [Real-time Collaboration](https://www.blocknotejs.org/docs/advanced/real-time-collaboration) for more info.
-   *
-   * @remarks `CollaborationOptions`
    */
-  collaboration?: {
-    /**
-     * The Yjs XML fragment that's used for collaboration.
-     */
-    fragment: Y.XmlFragment;
-    /**
-     * The user info for the current user that's shown to other collaborators.
-     */
-    user: {
-      name: string;
-      color: string;
-    };
-    /**
-     * A Yjs provider (used for awareness / cursor information)
-     */
-    provider: any;
-    /**
-     * Optional function to customize how cursors of users are rendered
-     */
-    renderCursor?: (user: any) => HTMLElement;
-    /**
-     * Optional flag to set when the user label should be shown with the default
-     * collaboration cursor. Setting to "always" will always show the label,
-     * while "activity" will only show the label when the user moves the cursor
-     * or types. Defaults to "activity".
-     */
-    showCursorLabels?: "always" | "activity";
-  };
+  collaboration?: CollaborationOptions;
 
   /**
    * Use default BlockNote font and reset the styles of <p> <li> <h1> elements etc., that are used in BlockNote.
@@ -912,13 +882,13 @@ export class BlockNoteEditor<
    */
   public onBeforeChange(
     callback: (context: {
-      getChanges: () => BlocksChanged<any, any, any>;
+      getChanges: () => BlocksChanged<BSchema, ISchema, SSchema>;
       tr: Transaction;
     }) => boolean | void,
-  ) {
+  ): () => void {
     return this._extensionManager
-      .getExtension(BlockChangeExtension)
-      ?.subscribe(callback);
+      .getExtension(BlockChangeExtension)!
+      .subscribe(callback);
   }
 
   /**
@@ -963,8 +933,8 @@ export class BlockNoteEditor<
    * 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._selectionManager.getSelectionCutBlocks();
+  public getSelectionCutBlocks(expandToWords = false) {
+    return this._selectionManager.getSelectionCutBlocks(expandToWords);
   }
 
   /**

package/src/editor/BlockNoteExtension.ts

@@ -89,6 +89,11 @@ export interface Extension<State = any, Key extends string = string> {
    * Add additional tiptap extensions to the editor.
    */
   readonly tiptapExtensions?: ReadonlyArray<AnyExtension>;
+
+  /**
+   * Add additional BlockNote extensions to the editor.
+   */
+  readonly blockNoteExtensions?: ReadonlyArray<ExtensionFactoryInstance>;
 }
 
 /**

package/src/editor/managers/EventManager.ts

@@ -89,7 +89,7 @@ export class EventManager<
       }
       callback(this.editor, {
         getChanges() {
-          return getBlocksChangedByTransaction(
+          return getBlocksChangedByTransaction<BSchema, I, S>(
             transaction,
             appendedTransactions,
           );

package/src/editor/managers/ExtensionManager/extensions.ts

@@ -4,7 +4,7 @@ import {
   Node,
   Extension as TiptapExtension,
 } from "@tiptap/core";
-import { Gapcursor } from "@tiptap/extension-gapcursor";
+import { Gapcursor } from "@tiptap/extensions/gap-cursor";
 import { Link } from "@tiptap/extension-link";
 import { Text } from "@tiptap/extension-text";
 import { createDropFileExtension } from "../../../api/clipboard/fromClipboard/fileDropExtension.js";
@@ -14,22 +14,17 @@ import {
   BlockChangeExtension,
   DropCursorExtension,
   FilePanelExtension,
-  ForkYDocExtension,
   FormattingToolbarExtension,
   HistoryExtension,
   LinkToolbarExtension,
   NodeSelectionKeyboardExtension,
   PlaceholderExtension,
   PreviousBlockTypeExtension,
-  SchemaMigration,
   ShowSelectionExtension,
   SideMenuExtension,
   SuggestionMenu,
   TableHandlesExtension,
   TrailingNodeExtension,
-  YCursorExtension,
-  YSyncExtension,
-  YUndoExtension,
 } from "../../../extensions/index.js";
 import {
   DEFAULT_LINK_PROTOCOL,
@@ -52,6 +47,7 @@ import {
   BlockNoteEditorOptions,
 } from "../../BlockNoteEditor.js";
 import { ExtensionFactoryInstance } from "../../BlockNoteExtension.js";
+import { CollaborationExtension } from "../../../extensions/Collaboration/Collaboration.js";
 
 // TODO remove linkify completely by vendoring the link extension & dropping linkifyjs as a dependency
 let LINKIFY_INITIALIZED = false;
@@ -190,13 +186,7 @@ export function getDefaultExtensions(
   ] as ExtensionFactoryInstance[];
 
   if (options.collaboration) {
-    extensions.push(ForkYDocExtension(options.collaboration));
-    if (options.collaboration.provider?.awareness) {
-      extensions.push(YCursorExtension(options.collaboration));
-    }
-    extensions.push(YSyncExtension(options.collaboration));
-    extensions.push(YUndoExtension(options.collaboration));
-    extensions.push(SchemaMigration(options.collaboration));
+    extensions.push(CollaborationExtension(options.collaboration));
   } else {
     // YUndo is not compatible with ProseMirror's history plugin
     extensions.push(HistoryExtension());

package/src/editor/managers/ExtensionManager/index.ts

@@ -203,6 +203,12 @@ export class ExtensionManager {
 
     this.extensions.push(instance);
 
+    if (instance.blockNoteExtensions) {
+      for (const extension of instance.blockNoteExtensions) {
+        this.addExtension(extension);
+      }
+    }
+
     return instance as any;
   }
 
@@ -317,8 +323,7 @@ export class ExtensionManager {
     const tiptapExtensions = getDefaultTiptapExtensions(
       this.editor,
       this.options,
-    );
-    // TODO filter out the default extensions via the disabledExtensions set?
+    ).filter((extension) => !this.disabledExtensions.has(extension.name));
 
     const getPriority = sortByDependencies(this.extensions);
 

package/src/editor/managers/SelectionManager.ts

@@ -1,3 +1,4 @@
+import { isNodeSelection, posToDOMRect } from "@tiptap/core";
 import {
   getSelection,
   getSelectionCutBlocks,
@@ -7,21 +8,20 @@ import {
   getTextCursorPosition,
   setTextCursorPosition,
 } from "../../api/blockManipulation/selections/textCursorPosition.js";
-import { isNodeSelection, posToDOMRect } from "@tiptap/core";
+import {
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+} from "../../blocks/defaultBlocks.js";
 import {
   BlockIdentifier,
   BlockSchema,
   InlineContentSchema,
   StyleSchema,
 } from "../../schema/index.js";
-import {
-  DefaultBlockSchema,
-  DefaultInlineContentSchema,
-  DefaultStyleSchema,
-} from "../../blocks/defaultBlocks.js";
-import { Selection } from "../selectionTypes.js";
-import { TextCursorPosition } from "../cursorPositionTypes.js";
 import { BlockNoteEditor } from "../BlockNoteEditor.js";
+import { TextCursorPosition } from "../cursorPositionTypes.js";
+import { Selection } from "../selectionTypes.js";
 
 export class SelectionManager<
   BSchema extends BlockSchema = DefaultBlockSchema,
@@ -47,8 +47,8 @@ export class SelectionManager<
    * 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.editor.transact((tr) => getSelectionCutBlocks(tr));
+  public getSelectionCutBlocks(expandToWords = false) {
+    return this.editor.transact((tr) => getSelectionCutBlocks(tr, expandToWords));
   }
 
   /**

package/src/extensions/BlockChange/BlockChange.ts

@@ -20,7 +20,7 @@ export const BlockChangeExtension = createExtension(() => {
         key: new PluginKey("blockChange"),
         filterTransaction: (tr) => {
           let changes:
-            | ReturnType<typeof getBlocksChangedByTransaction>
+            | ReturnType<typeof getBlocksChangedByTransaction<any, any, any>>
             | undefined = undefined;
 
           return beforeChangeCallbacks.reduce((acc, cb) => {
@@ -34,7 +34,7 @@ export const BlockChangeExtension = createExtension(() => {
                   if (changes) {
                     return changes;
                   }
-                  changes = getBlocksChangedByTransaction(tr);
+                  changes = getBlocksChangedByTransaction<any, any, any>(tr);
                   return changes;
                 },
                 tr,

package/src/extensions/Collaboration/Collaboration.ts

@@ -0,0 +1,55 @@
+import type * as Y from "yjs";
+import type { Awareness } from "y-protocols/awareness";
+import {
+  createExtension,
+  ExtensionOptions,
+} from "../../editor/BlockNoteExtension.js";
+import { ForkYDocExtension } from "./ForkYDoc.js";
+import { SchemaMigration } from "./schemaMigration/SchemaMigration.js";
+import { YCursorExtension } from "./YCursorPlugin.js";
+import { YSyncExtension } from "./YSync.js";
+import { YUndoExtension } from "./YUndo.js";
+
+export type CollaborationOptions = {
+  /**
+   * The Yjs XML fragment that's used for collaboration.
+   */
+  fragment: Y.XmlFragment;
+  /**
+   * The user info for the current user that's shown to other collaborators.
+   */
+  user: {
+    name: string;
+    color: string;
+  };
+  /**
+   * A Yjs provider (used for awareness / cursor information)
+   */
+  provider?: { awareness?: Awareness };
+  /**
+   * Optional function to customize how cursors of users are rendered
+   */
+  renderCursor?: (user: any) => HTMLElement;
+  /**
+   * Optional flag to set when the user label should be shown with the default
+   * collaboration cursor. Setting to "always" will always show the label,
+   * while "activity" will only show the label when the user moves the cursor
+   * or types. Defaults to "activity".
+   */
+  showCursorLabels?: "always" | "activity";
+};
+
+export const CollaborationExtension = createExtension(
+  ({ options }: ExtensionOptions<CollaborationOptions>) => {
+    return {
+      key: "collaboration",
+      blockNoteExtensions: [
+        ForkYDocExtension(options),
+        YCursorExtension(options),
+        YSyncExtension(options),
+        YUndoExtension(),
+        SchemaMigration(options),
+      ],
+    } as const;
+  },
+);

package/src/extensions/Collaboration/ForkYDoc.ts

@@ -5,10 +5,10 @@ import {
   createStore,
   ExtensionOptions,
 } from "../../editor/BlockNoteExtension.js";
+import { CollaborationOptions } from "./Collaboration.js";
 import { YCursorExtension } from "./YCursorPlugin.js";
 import { YSyncExtension } from "./YSync.js";
 import { YUndoExtension } from "./YUndo.js";
-import { BlockNoteEditorOptions } from "../../editor/BlockNoteEditor.js";
 
 /**
  * To find a fragment in another ydoc, we need to search for it.
@@ -44,12 +44,7 @@ function findTypeInOtherYdoc<T extends Y.AbstractType<any>>(
 }
 
 export const ForkYDocExtension = createExtension(
-  ({
-    editor,
-    options,
-  }: ExtensionOptions<
-    NonNullable<BlockNoteEditorOptions<any, any, any>["collaboration"]>
-  >) => {
+  ({ editor, options }: ExtensionOptions<CollaborationOptions>) => {
     let forkedState:
       | {
           originalFragment: Y.XmlFragment;
@@ -107,7 +102,7 @@ export const ForkYDocExtension = createExtension(
         editor.registerExtension([
           YSyncExtension(newOptions),
           // No need to register the cursor plugin again, it's a local fork
-          YUndoExtension({}),
+          YUndoExtension(),
         ]);
 
         // Tell the store that the editor is now forked
@@ -131,7 +126,7 @@ export const ForkYDocExtension = createExtension(
         editor.registerExtension([
           YSyncExtension(options),
           YCursorExtension(options),
-          YUndoExtension({}),
+          YUndoExtension(),
         ]);
 
         // Reset the undo stack to the original undo stack

package/src/extensions/Collaboration/YCursorPlugin.ts

@@ -3,7 +3,7 @@ import {
   createExtension,
   ExtensionOptions,
 } from "../../editor/BlockNoteExtension.js";
-import { BlockNoteEditorOptions } from "../../editor/BlockNoteEditor.js";
+import { CollaborationOptions } from "./Collaboration.js";
 
 export type CollaborationUser = {
   name: string;
@@ -67,30 +67,24 @@ function defaultCursorRender(user: CollaborationUser) {
 }
 
 export const YCursorExtension = createExtension(
-  ({
-    options,
-  }: ExtensionOptions<
-    NonNullable<BlockNoteEditorOptions<any, any, any>["collaboration"]>
-  >) => {
+  ({ options }: ExtensionOptions<CollaborationOptions>) => {
     const recentlyUpdatedCursors = new Map();
-
-    if (
+    const awareness =
       options.provider &&
       "awareness" in options.provider &&
       typeof options.provider.awareness === "object"
-    ) {
+        ? options.provider.awareness
+        : undefined;
+    if (awareness) {
       if (
-        "setLocalStateField" in options.provider.awareness &&
-        typeof options.provider.awareness.setLocalStateField === "function"
+        "setLocalStateField" in awareness &&
+        typeof awareness.setLocalStateField === "function"
       ) {
-        options.provider.awareness.setLocalStateField("user", options.user);
+        awareness.setLocalStateField("user", options.user);
       }
-      if (
-        "on" in options.provider.awareness &&
-        typeof options.provider.awareness.on === "function"
-      ) {
+      if ("on" in awareness && typeof awareness.on === "function") {
         if (options.showCursorLabels !== "always") {
-          options.provider.awareness.on(
+          awareness.on(
             "change",
             ({
               updated,
@@ -126,57 +120,59 @@ export const YCursorExtension = createExtension(
     return {
       key: "yCursor",
       prosemirrorPlugins: [
-        yCursorPlugin(options.provider.awareness, {
-          selectionBuilder: defaultSelectionBuilder,
-          cursorBuilder(user: CollaborationUser, clientID: number) {
-            let cursorData = recentlyUpdatedCursors.get(clientID);
-
-            if (!cursorData) {
-              const cursorElement = (
-                options.renderCursor ?? defaultCursorRender
-              )(user);
-
-              if (options.showCursorLabels !== "always") {
-                cursorElement.addEventListener("mouseenter", () => {
-                  const cursor = recentlyUpdatedCursors.get(clientID)!;
-                  cursor.element.setAttribute("data-active", "");
-
-                  if (cursor.hideTimeout) {
-                    clearTimeout(cursor.hideTimeout);
-                    recentlyUpdatedCursors.set(clientID, {
-                      element: cursor.element,
-                      hideTimeout: undefined,
+        awareness
+          ? yCursorPlugin(awareness, {
+              selectionBuilder: defaultSelectionBuilder,
+              cursorBuilder(user: CollaborationUser, clientID: number) {
+                let cursorData = recentlyUpdatedCursors.get(clientID);
+
+                if (!cursorData) {
+                  const cursorElement = (
+                    options.renderCursor ?? defaultCursorRender
+                  )(user);
+
+                  if (options.showCursorLabels !== "always") {
+                    cursorElement.addEventListener("mouseenter", () => {
+                      const cursor = recentlyUpdatedCursors.get(clientID)!;
+                      cursor.element.setAttribute("data-active", "");
+
+                      if (cursor.hideTimeout) {
+                        clearTimeout(cursor.hideTimeout);
+                        recentlyUpdatedCursors.set(clientID, {
+                          element: cursor.element,
+                          hideTimeout: undefined,
+                        });
+                      }
                     });
-                  }
-                });
 
-                cursorElement.addEventListener("mouseleave", () => {
-                  const cursor = recentlyUpdatedCursors.get(clientID)!;
+                    cursorElement.addEventListener("mouseleave", () => {
+                      const cursor = recentlyUpdatedCursors.get(clientID)!;
 
-                  recentlyUpdatedCursors.set(clientID, {
-                    element: cursor.element,
-                    hideTimeout: setTimeout(() => {
-                      cursor.element.removeAttribute("data-active");
-                    }, 2000),
-                  });
-                });
-              }
+                      recentlyUpdatedCursors.set(clientID, {
+                        element: cursor.element,
+                        hideTimeout: setTimeout(() => {
+                          cursor.element.removeAttribute("data-active");
+                        }, 2000),
+                      });
+                    });
+                  }
 
-              cursorData = {
-                element: cursorElement,
-                hideTimeout: undefined,
-              };
+                  cursorData = {
+                    element: cursorElement,
+                    hideTimeout: undefined,
+                  };
 
-              recentlyUpdatedCursors.set(clientID, cursorData);
-            }
+                  recentlyUpdatedCursors.set(clientID, cursorData);
+                }
 
-            return cursorData.element;
-          },
-        }),
-      ],
+                return cursorData.element;
+              },
+            })
+          : undefined,
+      ].filter(Boolean),
       dependsOn: ["ySync"],
       updateUser(user: { name: string; color: string; [key: string]: string }) {
-        options.provider.awareness.setLocalStateField("user", user);
+        awareness?.setLocalStateField("user", user);
       },
     } as const;
   },

package/src/extensions/Collaboration/YSync.ts

@@ -1,12 +1,12 @@
 import { ySyncPlugin } from "y-prosemirror";
-import { XmlFragment } from "yjs";
 import {
   ExtensionOptions,
   createExtension,
 } from "../../editor/BlockNoteExtension.js";
+import { CollaborationOptions } from "./Collaboration.js";
 
 export const YSyncExtension = createExtension(
-  ({ options }: ExtensionOptions<{ fragment: XmlFragment }>) => {
+  ({ options }: ExtensionOptions<Pick<CollaborationOptions, "fragment">>) => {
     return {
       key: "ySync",
       prosemirrorPlugins: [ySyncPlugin(options.fragment)],

package/src/extensions/Collaboration/YUndo.ts

@@ -1,10 +1,10 @@
 import { redoCommand, undoCommand, yUndoPlugin } from "y-prosemirror";
 import { createExtension } from "../../editor/BlockNoteExtension.js";
 
-export const YUndoExtension = createExtension(({ editor }) => {
+export const YUndoExtension = createExtension(() => {
   return {
     key: "yUndo",
-    prosemirrorPlugins: [yUndoPlugin({ trackedOrigins: [editor] })],
+    prosemirrorPlugins: [yUndoPlugin()],
     dependsOn: ["yCursor", "ySync"],
     undoCommand: undoCommand,
     redoCommand: redoCommand,

package/src/extensions/LinkToolbar/LinkToolbar.ts

@@ -1,6 +1,6 @@
 import { getMarkRange, posToDOMRect } from "@tiptap/core";
-import { createExtension } from "../../editor/BlockNoteExtension.js";
 import { getPmSchema } from "../../api/pmUtil.js";
+import { createExtension } from "../../editor/BlockNoteExtension.js";
 
 export const LinkToolbarExtension = createExtension(({ editor }) => {
   function getLinkElementAtPos(pos: number) {

package/src/extensions/ShowSelection/ShowSelection.ts

@@ -14,7 +14,7 @@ const PLUGIN_KEY = new PluginKey(`blocknote-show-selection`);
  */
 export const ShowSelectionExtension = createExtension(({ editor }) => {
   const store = createStore(
-    { enabled: false },
+    { enabledSet: new Set<string>() },
     {
       onUpdate() {
         editor.transact((tr) => tr.setMeta(PLUGIN_KEY, {}));
@@ -30,7 +30,7 @@ export const ShowSelectionExtension = createExtension(({ editor }) => {
         props: {
           decorations: (state) => {
             const { doc, selection } = state;
-            if (!store.state.enabled) {
+            if (store.state.enabledSet.size === 0) {
               return DecorationSet.empty;
             }
             const dec = Decoration.inline(selection.from, selection.to, {
@@ -43,9 +43,19 @@ export const ShowSelectionExtension = createExtension(({ editor }) => {
     ],
     /**
      * Show or hide the selection decoration
+     *
+     * @param shouldShow - Whether to show the selection decoration
+     * @param key - The key of the selection to show or hide,
+     * this is necessary to prevent disabling ShowSelection from one place
+     * will interfere with other parts of the code that need to show the selection decoration
+     * (e.g.: CreateLinkButton and AIExtension)
      */
-    showSelection(shouldShow: boolean) {
-      store.setState({ enabled: shouldShow });
+    showSelection(shouldShow: boolean, key: string) {
+      store.setState({
+        enabledSet: shouldShow
+          ? new Set([...store.state.enabledSet, key])
+          : new Set([...store.state.enabledSet].filter((k) => k !== key)),
+      });
     },
   } as const;
 });