@blocknote/core 0.30.0 → 0.31.0

package/src/comments/threadstore/yjs/YjsThreadStore.ts

@@ -26,13 +26,13 @@ export class YjsThreadStore extends YjsThreadStoreBase {
   constructor(
     private readonly userId: string,
     threadsYMap: Y.Map<any>,
-    auth: ThreadStoreAuth
+    auth: ThreadStoreAuth,
   ) {
     super(threadsYMap, auth);
   }
 
   private transact = <T, R>(
-    fn: (options: T) => R
+    fn: (options: T) => R,
   ): ((options: T) => Promise<R>) => {
     return async (options: T) => {
       return this.threadsYMap.doc!.transact(() => {
@@ -79,7 +79,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
       this.threadsYMap.set(thread.id, threadToYMap(thread));
 
       return thread;
-    }
+    },
   );
 
   // YjsThreadStore does not support addThreadToDocument
@@ -121,7 +121,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
 
       yThread.set("updatedAt", new Date().getTime());
       return comment;
-    }
+    },
   );
 
   public updateComment = this.transact(
@@ -140,7 +140,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
 
       const yCommentIndex = yArrayFindIndex(
         yThread.get("comments"),
-        (comment) => comment.get("id") === options.commentId
+        (comment) => comment.get("id") === options.commentId,
       );
 
       if (yCommentIndex === -1) {
@@ -156,7 +156,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
       yComment.set("body", options.comment.body);
       yComment.set("updatedAt", new Date().getTime());
       yComment.set("metadata", options.comment.metadata);
-    }
+    },
   );
 
   public deleteComment = this.transact(
@@ -172,7 +172,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
 
       const yCommentIndex = yArrayFindIndex(
         yThread.get("comments"),
-        (comment) => comment.get("id") === options.commentId
+        (comment) => comment.get("id") === options.commentId,
       );
 
       if (yCommentIndex === -1) {
@@ -210,13 +210,13 @@ export class YjsThreadStore extends YjsThreadStoreBase {
       }
 
       yThread.set("updatedAt", new Date().getTime());
-    }
+    },
   );
 
   public deleteThread = this.transact((options: { threadId: string }) => {
     if (
       !this.auth.canDeleteThread(
-        yMapToThread(this.threadsYMap.get(options.threadId))
+        yMapToThread(this.threadsYMap.get(options.threadId)),
       )
     ) {
       throw new Error("Not authorized");
@@ -263,7 +263,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
 
       const yCommentIndex = yArrayFindIndex(
         yThread.get("comments"),
-        (comment) => comment.get("id") === options.commentId
+        (comment) => comment.get("id") === options.commentId,
       );
 
       if (yCommentIndex === -1) {
@@ -292,7 +292,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
         reaction.set("userId", this.userId);
         reactionsByUser.set(key, reaction);
       }
-    }
+    },
   );
 
   public deleteReaction = this.transact(
@@ -304,7 +304,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
 
       const yCommentIndex = yArrayFindIndex(
         yThread.get("comments"),
-        (comment) => comment.get("id") === options.commentId
+        (comment) => comment.get("id") === options.commentId,
       );
 
       if (yCommentIndex === -1) {
@@ -324,13 +324,13 @@ export class YjsThreadStore extends YjsThreadStoreBase {
       const reactionsByUser = yComment.get("reactionsByUser");
 
       reactionsByUser.delete(key);
-    }
+    },
   );
 }
 
 function yArrayFindIndex(
   yArray: Y.Array<any>,
-  predicate: (item: any) => boolean
+  predicate: (item: any) => boolean,
 ) {
   for (let i = 0; i < yArray.length; i++) {
     if (predicate(yArray.get(i))) {

package/src/comments/threadstore/yjs/YjsThreadStoreBase.ts

@@ -11,7 +11,7 @@ import { yMapToThread } from "./yjsHelpers.js";
 export abstract class YjsThreadStoreBase extends ThreadStore {
   constructor(
     protected readonly threadsYMap: Y.Map<any>,
-    auth: ThreadStoreAuth
+    auth: ThreadStoreAuth,
   ) {
     super(auth);
   }

package/src/comments/threadstore/yjs/yjsHelpers.ts

@@ -52,7 +52,7 @@ type SingleUserCommentReactionData = {
 };
 
 export function yMapToReaction(
-  yMap: Y.Map<any>
+  yMap: Y.Map<any>,
 ): SingleUserCommentReactionData {
   return {
     emoji: yMap.get("emoji"),
@@ -63,7 +63,7 @@ export function yMapToReaction(
 
 function yMapToReactions(yMap: Y.Map<any>): CommentReactionData[] {
   const flatReactions = [...yMap.values()].map((reaction: Y.Map<any>) =>
-    yMapToReaction(reaction)
+    yMapToReaction(reaction),
   );
   // combine reactions by the same emoji
   return flatReactions.reduce(
@@ -74,8 +74,8 @@ function yMapToReactions(yMap: Y.Map<any>): CommentReactionData[] {
         existingReaction.createdAt = new Date(
           Math.min(
             existingReaction.createdAt.getTime(),
-            reaction.createdAt.getTime()
-          )
+            reaction.createdAt.getTime(),
+          ),
         );
       } else {
         acc.push({
@@ -86,7 +86,7 @@ function yMapToReactions(yMap: Y.Map<any>): CommentReactionData[] {
       }
       return acc;
     },
-    [] as CommentReactionData[]
+    [] as CommentReactionData[],
   );
 }
 
@@ -113,7 +113,7 @@ export function yMapToThread(yMap: Y.Map<any>): ThreadData {
     createdAt: new Date(yMap.get("createdAt")),
     updatedAt: new Date(yMap.get("updatedAt")),
     comments: ((yMap.get("comments") as Y.Array<Y.Map<any>>) || []).map(
-      (comment) => yMapToComment(comment)
+      (comment) => yMapToComment(comment),
     ),
     resolved: yMap.get("resolved"),
     resolvedUpdatedAt: new Date(yMap.get("resolvedUpdatedAt")),

package/src/editor/Block.css

@@ -23,6 +23,14 @@ BASIC STYLES
   */
 }
 
+/* We can't set `display: flex` on `.bn-block-content` while it has inline 
+content (see #1629). However, it's necessary to set alignment of blocks
+without content as these can't use `text-align`, so this additional rule is 
+used. */
+.bn-block-content:not(:has(.bn-inline-content)) {
+  display: flex;
+}
+
 .bn-block-content::before {
   /* content: ""; */
   transition: all 0.2s;
@@ -144,6 +152,11 @@ NESTED BLOCKS
 
 .bn-block-outer:not([data-prev-type])
   > .bn-block
+  > .bn-block-content[data-content-type="heading"],
+.bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > div[data-type="modification"]
+  > div[data-type="modification"]
   > .bn-block-content[data-content-type="heading"] {
   font-size: var(--level);
   font-weight: bold;
@@ -187,6 +200,10 @@ NESTED BLOCKS
 
 .bn-block-outer:not([data-prev-type])
   > .bn-block
+  > .bn-block-content[data-content-type="numberedListItem"]::before,
+.bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > div[data-type="modification"]
   > .bn-block-content[data-content-type="numberedListItem"]::before {
   content: var(--index) ".";
 }
@@ -231,6 +248,10 @@ NESTED BLOCKS
 
 .bn-block-outer:not([data-prev-type])
   > .bn-block
+  > .bn-block-content[data-content-type="bulletListItem"]::before,
+.bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > div[data-type="modification"]
   > .bn-block-content[data-content-type="bulletListItem"]::before {
   content: "•";
 }
@@ -248,6 +269,12 @@ NESTED BLOCKS
   ~ .bn-block-group
   > .bn-block-outer:not([data-prev-type])
   > .bn-block
+  > .bn-block-content[data-content-type="bulletListItem"]::before,
+[data-content-type="bulletListItem"]
+  ~ .bn-block-group
+  > .bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > div[data-type="modification"]
   > .bn-block-content[data-content-type="bulletListItem"]::before {
   content: "◦";
 }
@@ -269,6 +296,14 @@ NESTED BLOCKS
   ~ .bn-block-group
   > .bn-block-outer:not([data-prev-type])
   > .bn-block
+  > .bn-block-content[data-content-type="bulletListItem"]::before,
+[data-content-type="bulletListItem"]
+  ~ .bn-block-group
+  [data-content-type="bulletListItem"]
+  ~ .bn-block-group
+  > .bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > div[data-type="modification"]
   > .bn-block-content[data-content-type="bulletListItem"]::before {
   content: "▪";
 }
@@ -434,7 +469,6 @@ NESTED BLOCKS
   position: absolute;
   font-style: italic;
 }
-
 /* TODO: should this be here? */
 
 /* TEXT COLORS */

package/src/editor/BlockNoteEditor.test.ts

@@ -18,7 +18,7 @@ it("creates an editor", () => {
 it("immediately replaces doc", async () => {
   const editor = BlockNoteEditor.create();
   const blocks = await editor.tryParseMarkdownToBlocks(
-    "This is a normal text\n\n# And this is a large heading"
+    "This is a normal text\n\n# And this is a large heading",
   );
   editor.replaceBlocks(editor.document, blocks);
   expect(editor.document).toMatchInlineSnapshot(`
@@ -67,14 +67,21 @@ it("adds id attribute when requested", async () => {
     setIdAttribute: true,
   });
   const blocks = await editor.tryParseMarkdownToBlocks(
-    "This is a normal text\n\n# And this is a large heading"
+    "This is a normal text\n\n# And this is a large heading",
   );
   editor.replaceBlocks(editor.document, blocks);
   expect(await editor.blocksToFullHTML(editor.document)).toMatchInlineSnapshot(
-    `"<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1" id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1" id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">This is a normal text</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="2" id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2" id="2"><div class="bn-block-content" data-content-type="heading"><h1 class="bn-inline-content">And this is a large heading</h1></div></div></div></div>"`
+    `"<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1" id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1" id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">This is a normal text</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="2" id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2" id="2"><div class="bn-block-content" data-content-type="heading"><h1 class="bn-inline-content">And this is a large heading</h1></div></div></div></div>"`,
   );
 });
 
+it("updates block", () => {
+  const editor = BlockNoteEditor.create();
+  editor.updateBlock(editor.document[0], {
+    content: "hello",
+  });
+});
+
 it("block prop types", () => {
   // this test checks whether the block props are correctly typed in typescript
   const editor = BlockNoteEditor.create();

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,10 +376,17 @@ 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, BlockNoteExtension | BlockNoteExtensionFactory>;
 
+  /**
+   * Register
+   */
+  extensions: Array<BlockNoteExtension | BlockNoteExtensionFactory>;
+
   /**
    * Boolean indicating whether the editor is in headless mode.
    * Headless mode means we can use features like importing / exporting blocks,
@@ -404,7 +418,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 +487,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,6 +625,16 @@ export class BlockNoteEditor<
     });
 
     // add extensions from options
+    for (let ext of newOptions.extensions || []) {
+      if (typeof ext === "function") {
+        // factory
+        ext = ext(this);
+      }
+      const key = (ext.constructor as any).name();
+      this.extensions[key] = ext;
+    }
+
+    // (when passed in via the deprecated `_extensions` option)
     Object.entries(newOptions._extensions || {}).forEach(([key, ext]) => {
       if (typeof ext === "function") {
         // factory
@@ -625,7 +651,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 +717,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 +890,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.name(),
+  ): 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 +991,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 +1136,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.
@@ -1231,7 +1282,10 @@ export class BlockNoteEditor<
    *
    * @param content can be a string, or array of partial inline content elements
    */
-  public insertInlineContent(content: PartialInlineContent<ISchema, SSchema>) {
+  public insertInlineContent(
+    content: PartialInlineContent<ISchema, SSchema>,
+    { updateSelection = false }: { updateSelection?: boolean } = {},
+  ) {
     const nodes = inlineContentToNodes(content, this.pmSchema);
 
     this.transact((tr) => {
@@ -1242,6 +1296,9 @@ export class BlockNoteEditor<
           to: tr.selection.to,
         },
         nodes,
+        {
+          updateSelection,
+        },
       );
     });
   }
@@ -1494,7 +1551,7 @@ export class BlockNoteEditor<
       );
     }
 
-    this.cursorPlugin.updateUser(user);
+    (this.extensions["yCursorPlugin"] as CursorPlugin).updateUser(user);
   }
 
   /**
@@ -1589,8 +1646,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;
@@ -1635,7 +1692,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 name(): string {
+    throw new Error("You must implement the name 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
+  }
+}