@blocknote/core 0.44.2 → 0.45.0

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/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -89,41 +89,24 @@ export function getDefaultSlashMenuItems<
   const items: DefaultSuggestionItem[] = [];
 
   if (editorHasBlockWithType(editor, "heading", { level: "number" })) {
-    items.push(
-      {
-        onItemClick: () => {
-          insertOrUpdateBlockForSlashMenu(editor, {
-            type: "heading",
-            props: { level: 1 },
-          });
-        },
-        badge: formatKeyboardShortcut("Mod-Alt-1"),
-        key: "heading",
-        ...editor.dictionary.slash_menu.heading,
-      },
-      {
-        onItemClick: () => {
-          insertOrUpdateBlockForSlashMenu(editor, {
-            type: "heading",
-            props: { level: 2 },
-          });
-        },
-        badge: formatKeyboardShortcut("Mod-Alt-2"),
-        key: "heading_2",
-        ...editor.dictionary.slash_menu.heading_2,
-      },
-      {
-        onItemClick: () => {
-          insertOrUpdateBlockForSlashMenu(editor, {
-            type: "heading",
-            props: { level: 3 },
-          });
-        },
-        badge: formatKeyboardShortcut("Mod-Alt-3"),
-        key: "heading_3",
-        ...editor.dictionary.slash_menu.heading_3,
-      },
-    );
+    (editor.schema.blockSchema.heading.propSchema.level.values || [])
+      .filter((level): level is 1 | 2 | 3 => level <= 3)
+      .forEach((level) => {
+        items.push({
+          onItemClick: () => {
+            insertOrUpdateBlockForSlashMenu(editor, {
+              type: "heading",
+              props: { level: level },
+            });
+          },
+          badge: formatKeyboardShortcut(`Mod-Alt-${level}`),
+          key:
+            level === 1 ? ("heading" as const) : (`heading_${level}` as const),
+          ...editor.dictionary.slash_menu[
+            level === 1 ? ("heading" as const) : (`heading_${level}` as const)
+          ],
+        });
+      });
   }
 
   if (editorHasBlockWithType(editor, "quote")) {
@@ -316,39 +299,27 @@ export function getDefaultSlashMenuItems<
       isToggleable: "boolean",
     })
   ) {
-    items.push(
-      {
-        onItemClick: () => {
-          insertOrUpdateBlockForSlashMenu(editor, {
-            type: "heading",
-            props: { level: 1, isToggleable: true },
-          });
-        },
-        key: "toggle_heading",
-        ...editor.dictionary.slash_menu.toggle_heading,
-      },
-      {
-        onItemClick: () => {
-          insertOrUpdateBlockForSlashMenu(editor, {
-            type: "heading",
-            props: { level: 2, isToggleable: true },
-          });
-        },
-
-        key: "toggle_heading_2",
-        ...editor.dictionary.slash_menu.toggle_heading_2,
-      },
-      {
-        onItemClick: () => {
-          insertOrUpdateBlockForSlashMenu(editor, {
-            type: "heading",
-            props: { level: 3, isToggleable: true },
-          });
-        },
-        key: "toggle_heading_3",
-        ...editor.dictionary.slash_menu.toggle_heading_3,
-      },
-    );
+    (editor.schema.blockSchema.heading.propSchema.level.values || [])
+      .filter((level): level is 1 | 2 | 3 => level <= 3)
+      .forEach((level) => {
+        items.push({
+          onItemClick: () => {
+            insertOrUpdateBlockForSlashMenu(editor, {
+              type: "heading",
+              props: { level: level, isToggleable: true },
+            });
+          },
+          key:
+            level === 1
+              ? ("toggle_heading" as const)
+              : (`toggle_heading_${level}` as const),
+          ...editor.dictionary.slash_menu[
+            level === 1
+              ? ("toggle_heading" as const)
+              : (`toggle_heading_${level}` as const)
+          ],
+        });
+      });
   }
 
   if (editorHasBlockWithType(editor, "heading", { level: "number" })) {
@@ -362,6 +333,7 @@ export function getDefaultSlashMenuItems<
               props: { level: level },
             });
           },
+          badge: formatKeyboardShortcut(`Mod-Alt-${level}`),
           key: `heading_${level}`,
           ...editor.dictionary.slash_menu[`heading_${level}`],
         });

package/src/extensions/TableHandles/TableHandles.ts

@@ -621,12 +621,16 @@ export const TableHandlesExtension = createExtension(({ editor }) => {
         key: tableHandlesPluginKey,
         view: (editorView) => {
           view = new TableHandlesView(editor as any, editorView, (state) => {
-            store.setState({
-              ...state,
-              draggingState: state.draggingState
-                ? { ...state.draggingState }
+            store.setState(
+              state.block
+                ? {
+                    ...state,
+                    draggingState: state.draggingState
+                      ? { ...state.draggingState }
+                      : undefined,
+                  }
                 : undefined,
-            });
+            );
           });
           return view;
         },

package/src/index.ts

@@ -1,7 +1,7 @@
 export * from "./api/blockManipulation/commands/insertBlocks/insertBlocks.js";
 export * from "./api/blockManipulation/commands/replaceBlocks/replaceBlocks.js";
-export * from "./api/blockManipulation/commands/updateBlock/updateBlock.js";
 export * from "./api/blockManipulation/commands/replaceBlocks/util/fixColumnList.js";
+export * from "./api/blockManipulation/commands/updateBlock/updateBlock.js";
 export * from "./api/exporters/html/externalHTMLExporter.js";
 export * from "./api/exporters/html/internalHTMLSerializer.js";
 export * from "./api/getBlockInfoFromPos.js";
@@ -19,6 +19,7 @@ export * from "./i18n/dictionary.js";
 export * from "./schema/index.js";
 export * from "./util/browser.js";
 export * from "./util/combineByGroup.js";
+export * from "./util/expandToWords.js";
 export * from "./util/string.js";
 export * from "./util/table.js";
 export * from "./util/typescript.js";

package/src/schema/blocks/createSpec.ts

@@ -70,6 +70,8 @@ export function getParseRules<
 
         return props;
       },
+      // Because we do the parsing ourselves, we want to preserve whitespace for content we've parsed
+      preserveWhitespace: true,
       getContent:
         config.content === "inline" || config.content === "none"
           ? (node, schema) => {
@@ -97,6 +99,7 @@ export function getParseRules<
                 const parser = DOMParser.fromSchema(schema);
                 const parsed = parser.parse(clone, {
                   topNode: schema.nodes.paragraph.create(),
+                  preserveWhitespace: true,
                 });
 
                 return parsed.content;

package/src/util/expandToWords.ts

@@ -0,0 +1,38 @@
+import type { Node, ResolvedPos } from "prosemirror-model";
+
+/**
+ * Expands a range (start to end) to include the rest of the word if it starts or ends within a word
+ */
+export function expandPMRangeToWords(
+  doc: Node,
+  range: { $from: ResolvedPos; $to: ResolvedPos },
+) {
+  let { $from, $to } = range;
+
+  // Expand Start
+  // If the selection starts with a word character or punctuation, check if we need to expand left to include the rest of the word
+  if ($from.pos > $from.start() && $from.pos < doc.content.size) {
+    const charAfterStart = doc.textBetween($from.pos, $from.pos + 1);
+    if (/^[\w\p{P}]$/u.test(charAfterStart)) {
+      const textBefore = doc.textBetween($from.start(), $from.pos);
+      const wordMatch = textBefore.match(/[\w\p{P}]+$/u);
+      if (wordMatch) {
+        $from = doc.resolve($from.pos - wordMatch[0].length);
+      }
+    }
+  }
+
+  // Expand End
+  // If the selection ends with a word characte or punctuation, check if we need to expand right to include the rest of the word
+  if ($to.pos < $to.end() && $to.pos > 0) {
+    const charBeforeEnd = doc.textBetween($to.pos - 1, $to.pos);
+    if (/^[\w\p{P}]$/u.test(charBeforeEnd)) {
+      const textAfter = doc.textBetween($to.pos, $to.end());
+      const wordMatch = textAfter.match(/^[\w\p{P}]+/u);
+      if (wordMatch) {
+        $to = doc.resolve($to.pos + wordMatch[0].length);
+      }
+    }
+  }
+  return { $from, $to, from: $from.pos, to: $to.pos };
+}

package/types/src/api/blockManipulation/selections/selection.d.ts

@@ -4,7 +4,7 @@ import { Selection } from "../../../editor/selectionTypes.js";
 import { BlockIdentifier, BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema/index.js";
 export declare function getSelection<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(tr: Transaction): Selection<BSchema, I, S> | undefined;
 export declare function setSelection(tr: Transaction, startBlock: BlockIdentifier, endBlock: BlockIdentifier): void;
-export declare function getSelectionCutBlocks(tr: Transaction): {
+export declare function getSelectionCutBlocks(tr: Transaction, expandToWords?: boolean): {
     blocks: Block<Record<string, import("../../../index.js").BlockConfig<string, import("../../../index.js").PropSchema, "inline" | "none" | "table">>, InlineContentSchema, StyleSchema>[];
     blockCutAtStart: string | undefined;
     blockCutAtEnd: string | undefined;